Question

我在两个独立的液体容器内有两个偏移div（col-lg-6 col-lg-offset-3）。由于某种原因，第一个的宽度比第二个的宽度略窄。我想匹配第一个的宽度和第二个的宽度。有人可以帮忙吗？亲切，我是一个新手。该页面位于http://prayerlb.com/prayerLB/index1.html。

以下是相关的HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div id="bluebar_top"></div>
        <div class="city_bg">
          <div class="row">
            <div class="col-lg-6 col-lg-offset-3">
              <div id="top"><a href="index.html"><img src="images/lbpb_header.gif" class="img-responsive" alt="Long Beach Prayer Breakfast"></a> 
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

  <!-- BOOTSTRAP 3.3.6 NAVBAR CONTENT -->

  </div>
</nav>

<div class="container-fluid" style="margin-top: -20px">
  <section class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <div class="row"><img src="images/photo_banner2.jpg" class="img-responsive" alt="Strength in Community..."></div>
        <div class="row main_article">

      <!-- MAIN CONTENT -->

        </div>
      </div>
    </div>
  </section>
</div>

...和CSS：

#bluebar_top {
height: 20px;
width: 100%;
background-color: #02425f;
}
.city_bg {
background-image:url(../images/lbpb_header1.jpg);
background-repeat:no-repeat;
background-size: contain;
background-size: cover;
}

谢谢！

Answer 1

这是因为你有嵌套的列和行。这意味着您在列和行中有列和行。如果您不打算包含类似.col-md-7之类的浮动列，那么您不需要添加行和列。如果你把它们放在一起，那么它会增加额外的填充。

所以你的顶部的标记应该看起来像下面这样：

<div id="bluebar_top"></div>
<div class="container-fluid city_bg">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <a id="top" href="index.html"><img src="http://prayerlb.com/prayerLB/images/lbpb_header.gif" /></a>
    </div>
  </div>
</div>

您可以从容器中删除#bluebar_top，只需将其放在页面顶部，然后将.city_bg类添加到容器本身。然后，您可以将行和列放在容器中，而不需要将它们嵌套在其他行和列中。

希望这有点意义。在整个页面中有更多这样的示例，这很可能是为什么如果您查看页面底部有一个不应该存在的水平滚动条。发生这种情况是因为从嵌套的列和行添加了额外的填充和负边距。

我已经弄清楚如何在下面写下你的页面。检查一下，看看标记有何不同。

注意：我在演示中使用了.col-sm-offset而不是.col-lg-offset，因此你可以在小提琴中看到它更容易，所以你需要将输出窗口的大小调整为.sm大小才能看到差异而非.lg大小只是为了更容易查看。

Fiddle Demo

无论如何，希望这一切都有所帮助，如果您有任何问题，请随时在下面发表评论

Bootstrap 3 - 流体容器内的偏移量

1 个答案: