ブートストラップグリッド左マージンが整列していない

Question

これがブートストラップのバグかグリッドシステムを理解できないのか分かりません。私は、グリッドシステムで、ボトムパネルと、列幅1-7で遊んでてきた

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="row"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
      
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1"> 
 
       <h3>This Guy</h3> 
 
       </div> 
 
      </div> 
 
      
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1"> 
 
       <h3>That Guy</h3> 
 
       </div> 
 
      </div> 
 
      
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

を：私が整列する2つのヘッダ（このガイ、ガイそれを）希望しますすべてが左の余白を揃えますが、9つ以上の列の幅は異なる左揃えになります。

私の質問：ブートストラップ3を使用して、異なるパネルに6列幅の行と12列幅の行の内容を揃える方法はありますか？

Answer 1

私はあなたがこの作品を作るために、独自のオフセットクラスを作る必要があるとしていると思います。

新しい行を開始するたびに、12列の新しい列コンテキストが開始されます。あなたのこのGuyのテキストは、6ワイド列の内側に1つオフセットされた10ワイド列です。あなたのそのGuyのテキストも、幅が10の広い列で、1だけオフセットされていますが、幅は12の列です。ブートストラップではパーセンテージが使用されているため、のサイズは、.col-md-10 .col-md-offset-1が入っているコンテナのサイズが異なるために異なります。

解決方法：.col-md-offset-0-5のような独自のオフセットクラスを作成してください。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
@media (min-width: 992px) { 
 
    .col-md-offset-0-5 { 
 
    margin-left: 4.1666666%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
      
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1"> 
 
       <h3>This Guy</h3> 
 
       </div> 
 
      </div> 
 
      
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="col-md-10 col-md-offset-1"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-0-5"> 
 
       <h3>That Guy</h3> 
 
       </div> 
 
      </div> 
 
      
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>