Bootstrap Grid - 容器内的垂直拆分答案

【问题标题】：Bootstrap Grid - vertical split within containerBootstrap Grid - 容器内的垂直拆分
【发布时间】：2016-06-14 20:02:02
【问题描述】：

我无法在引导程序中对齐容器流体。我附上了我正在努力实现的截图。左下角的列表项应与顶部的文本（包含在容器中）对齐。右下角的时事通讯部分（红色背景）应覆盖从屏幕中心到边缘的整个宽度。时事通讯部分中的内容也应与顶部的文本对齐。

这是我目前在底部的代码：

<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

【问题讨论】：

那你为什么要使用container-fluid呢？把它也做成一个容器就好了....
尝试将 css 和您正在使用的 HTML 的其他部分也放入。
@reinder 我使用容器流体而不是容器的原因是允许右侧为全宽。当我将 container-fluid 更改为 container 时，红色背景在容器内被切断。

标签： html css twitter-bootstrap

【解决方案1】：

要使背景全页，试试这个：

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

你可以在 "container-fluid" 或 "container" 上设置 "padding: 0" 使其变直

【讨论】：

【解决方案2】：

您可以使用 CSS 渐变（如果您唯一关心的是现代浏览器）或绝对定位元素或图像，将您的页脚包裹在一个 div 中，并为其提供屏幕宽度的一半。请参阅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）

【讨论】：

【解决方案3】：

改变

<div class="container-fluid">

到

<div class="container">

【讨论】：

感谢您的建议！不幸的是，当我使用“container”而不是“container-fluid”时，右侧（时事通讯）也包含在内，这意味着红色背景不会延伸到屏幕右侧。