html - 无法让 Bootstrap 嵌套的行/列正确排列

Question

我正在使用 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/

Answer 1

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

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