Question

我在引导程序中对齐容器流体时遇到问题。我附上了我想要实现的截图。左下角的列表项应与顶部的文本对齐（包含在容器中）。右下角的红色通讯部分（红色背景）应该跨越从屏幕中心到边缘的整个宽度。新闻通讯部分的内容也应与顶部的文字保持一致。

以下是我目前对底部代码的看法：

<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渐变（如果您唯一关注的是现代浏览器）或使用绝对定位元素或图像，您可以使用CSS渐变（如果您唯一关注的是现代浏览器）。有关详细信息，请参阅this answer。然后在这个＆＃34;页脚包装＆＃34;放置容器，在此容器中定义列。对于每列，您可以再次设置背景颜色。这将覆盖＆＃34;覆盖＆＃34;容器内页脚的背景颜色。

SharedSparkContext

有关示例，请参阅this fiddle，您可能需要为移动设备编写一些CSS（取决于您用于列包装的断点，-sm，-md或-lg）

Answer 2

Change

<div class="container-fluid">

to

<div class="container">

Answer 3

要制作背景整页，请尝试以下操作：

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

你可以在“容器流体”或“容器”上制作“填充：0”以使其成为直线

Bootstrap Grid - 在容器内垂直拆分

3 个答案: