Bootstrap网格左边距不对齐

Question

我不确定这是否是一个引导错误，或者我只是不了解网格系统。我希望两个标题（This Guy，That Guy）对齐：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我一直在玩网格系统，在底部面板和列宽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>