Bootstrap 容器中有 3 个两列，背景宽度为 100%

Question

谁能帮我制作 bootstrap 3 布局，2 列，背景宽度为 100%？

示例：

Answer 1

您是否对保留在容器中的列有疑问？这些列也需要排成一行。这篇文章可能会有所帮助：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

如果你想要两列并排，这是一种方法。

        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                </div>
                <div class="col-lg-4 col-lg-offset-4">
                </div>
            </div>
         </div>

更新：

有关此问题的解决方案，请参见此处：http://bootply.com/Y8SX4b3F6g

Answer 2

正确的做法是将背景设置为行宽的50%宽度：

html:

<div class="row">
<div class="container">
    <div class="col-xs-6">
        <h1>left</h1>
    </div>

    <div class="col-xs-6">
        <h1>right</h1>
    </div>
</div>
</div>

CSS:

.row {
background-color: #e1e2e4;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50% 100%;
}

bootply: http://www.bootply.com/yDCLfN2DSb

Bootstrap 容器中有 3 个两列，背景宽度为 100%

Bootstrap 3 two columns in container with 100% width backgrounds

twitter-bootstrap-3

two-columns