html - Bootstrap Grid - 在容器内垂直分割

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

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)