无法让 Bootstrap 嵌套的行/列正确排列答案

【问题标题】：Having trouble getting Bootstrap nested rows/columns to line up correctly无法让 Bootstrap 嵌套的行/列正确排列
【发布时间】：2015-11-17 00:58:30
【问题描述】：

我正在使用 Bootstrap 并试图让一些嵌套的行/列与布局的其余部分正确对齐，但它不起作用。我尝试了各种边距和填充样式调整，但顶行下方总是有额外的空间。看到布局后，我想做什么就很明显了。

HTML 代码：

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-10">
    <div class="row">
      <div class="col-md-4 min-gutter">
        <div class="img-placeholder-1"></div>
      </div>
      <div class="col-md-3 min-gutter">
        <div class="row full-gutter">
          <div class="col-md-6 min-gutter">
            <div class="img-placeholder-2"></div>
          </div>
          <div class="col-md-6 min-gutter">
            <div class="img-placeholder-2"></div>
          </div>
        </div>
        <div class="row full-gutter">
          <div class="col-md-12 min-gutter">
            <div class="img-placeholder-2"></div>
          </div>
        </div>
      </div>
      <div class="col-md-3 min-gutter">
        <div class="img-placeholder-1"></div>
      </div>
      <div class="col-md-2 min-gutter">
        <div class="img-placeholder-1"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-5 min-gutter">
        <div class="img-placeholder-1"></div>
      </div>
      <div class="col-md-7 min-gutter">
        <div class="img-placeholder-1"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-7 min-gutter">
        <div class="img-placeholder-2"></div>
      </div>
      <div class="col-md-2 min-gutter">
        <div class="img-placeholder-2"></div>
      </div>
      <div class="col-md-3 min-gutter">
        <div class="img-placeholder-2"></div>
      </div>
    </div>
  </div>
  <div class="col-md-1"></div>
</div>

CSS 样式：

.no-gutter {
    padding-right:0;
    padding-left:0; }
.min-gutter {
    padding-right:5px!important;
    padding-left:5px!important; }
.full-gutter {
    padding-right:10px!important;
    padding-left:10px!important; }
.img-placeholder-1 {
    width: 100%;
    height: 230px;
    background: gray;
    margin: 0 0; }
.img-placeholder-2 {
    width: 100%;
    height: 105px;
    background: gray;
    margin: 0 0; }

测试链接在这里：http://designatwork.net/precision/test/

【问题讨论】：

标签： html css wordpress twitter-bootstrap

【解决方案1】：

通过检查您的页面，您会看到一个额外的<p> 标签即将到来，这就是顶部行下方出现额外空间的原因。在 Wordpress 中，有时我们会遇到这个问题，因此您可以删除那些额外的 <p> 标签，或者您可以为第二行添加此 css 以删除空间。

element.style {
  position: relative;
  top: -10px !important;
}

【讨论】：