Bootstrap网格系统 - 垂直分割容器内部

Question

我在使用Bootstrap时遇到了容器自适应的问题。我想让左下角的列表项与顶部文本对齐（该文本包含在容器中）。右下角的新闻通讯栏（红色背景）应跨越整个屏幕宽度，从中心到屏幕边缘。新闻通讯栏内的内容也应与顶部文本对齐。以下是我目前在底部代码的实现：

<div class="container-fluid">
<div class="col-md-12">
    <div id="footer" class="col-md-6">
        <ul>
            <li>About Us</li>
            <li>Consumers</li>
            <li>Sites</li>
            <li>Operators</li>
            <li>Contact Us</li>
        </ul>
    </div>
        <div id="newsletter" class="col-md-6">
            <h4>Subscribe to our newsletter to receive the latest news about Poqeta </h4>
        </div>
</div>

感谢任何建议！ bootstrap-grid

- Kaidao

---

你为什么要使用container-fluid呢？只需将其设置为container即可... - reinder

尝试将CSS和其他HTML部分一起放置。 - DebRaj

@reinder 我使用 container-fluid 而不是 container 的原因是为了让右侧宽度充满整个屏幕。当我将 container-fluid 改成 container 时，红色背景会被 container 截断。 - Kaidao

Answer 1

你可以将页脚包裹在一个 div 中，并设置一个宽度为屏幕宽度一半的背景，可以使用 CSS 渐变（如果您只关心现代浏览器），或者使用绝对定位的元素或图像。有关更多信息，请参见 this answer。然后，在这个“页脚包装器”中，放置一个容器，在这个容器中定义你的列。对于每一列，再次设置背景颜色。这将在容器内“覆盖”页脚的背景颜色。

<div class="footer">
  <div class="container">
    <div class="col-sm-8 left">
      left section, list items
    </div>
    <div class="col-sm-4 newsletter">
      newsletter section
    </div>
  </div>
</div>

.footer {
  background: linear-gradient(90deg, #ffffff 50%, #ff0000 50%);
}

.left {
  background: #ffffff;
}

.newsletter {
  background: #ff0000;
}

请参考this fiddle中的示例，您可能需要为移动设备编写一些CSS（具体取决于您在列包装时使用的断点，-sm、-md或-lg）

- reinder

Answer 2

改变

<div class="container-fluid">

到

<div class="container">

- Binh Tran

---

谢谢您的建议！不幸的是，当我使用“容器”而不是“容器流体”时，右侧（新闻通讯）也被包含在内，这意味着红色背景不会延伸到屏幕的右侧。 - Kaidao

Answer 3

要使背景全屏，可以尝试以下方法：

<div class="container-fluid">
    <div class="container">
    ...
    </div>
</div>

你可以在“container-fluid”或“container”上进行“padding: 0”来使其变直。

- Binh Tran