html - Bootstrap 网格左边距不对齐

Question

我不确定这是引导错误还是我不了解网格系统。我希望两个 header (这个人，那个人)对齐:

@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 列的新列上下文。您的 This Guy 文本是一个 10 宽的列，在 6 宽的列内偏移 1。您的 That Guy 文本也是 10 宽的列偏移 1，但它位于 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>