ブートストラップを使用してパネルを塗りつぶすようにグリップします

Question

パネルを埋めるためにグリッドを作成しようとしていましたが、問題があります。私はパネルのボディである親を埋めるために、パネルボディのグリッドを表す2つのdivにしたいと思います。以下のマークアップは次のとおりです。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-lg-8 col-md-offset-2"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Welcome</div> 

       <div class="panel-body" id="app"> 


        <div class="row"> 


         <div class=" col-lg-4 col-lg-4"> 

          <ul class="list-group"> 
           <li class="list-group-item" v-for="li in list"> 
           </li> 
          </ul> 


         </div> 


         <div class="col-md-8 col-lg-8 "> 

          <ul class="list-group"> 
           <li class="list-group-item" v-for="li in list"> {{ li.body }} 
           </li> 
          </ul> 

         </div> 


        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

ブートストラップカラムには、左右のパディングが自動的に含まれます。これを削除するには、Julien Melissasが行ったようにクラスに列を追加します。

http://julienmelissas.com/no-gutter-column-trick-for-bootstrap/

CSSファイルにこれらのクラスを追加すると、あなたの行に無側溝クラスを追加することができます。

これはどのように動作するかを示すペンです。

http://codepen.io/mutualdesigns/pen/jAXRKm

あなたはパネルの内側に列の左右にスペースを削除したい場合は、同様の方法でその要素のパディングを無効にする必要があります。