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

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

最佳答案

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

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