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

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

1 个答案: