Bootstrap Grid左邊距不對齊

Question

我不確定這是引導程序錯誤還是我只是不理解網格系統。我想這兩個頭部（這個傢伙，那傢伙）對齊：

@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>

我一直在與電網系統，並在底部面板玩耍和列寬1-7全部對齊左邊距，但9+列寬具有不同的左對齊。

所以我的問題：有沒有辦法使用Bootstrap 3在不同的面板中對齊6列和12列寬的行的內容？

Answer 1

我認爲你將不得不使自己的膠印級，使這項工作。

每次開始一個新行時，您將開始一個新的12列的列上下文。您的這個人文本是一個10寬的列，在6寬的列內偏移1。您的那個Guy文本也是一個偏移量爲1的10寬列，但它在12寬列內。 Bootstrap使用百分比，因此.col-md-offset-1的大小將會不同，因爲.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>