Question

我尝试并排放置两个容器，但它们堆叠在一起。即使是容器流体类也没有帮助。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            Container Left
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            Container Right
        </div>
    </div>
</div>

可以在Bootstrap中使用吗？

Answer 1

Bootstrap使用12列网格，因此div中的每一个都会占用一行。您还将每个放在一行中，行总是堆叠。试试这个：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6">
            Container Left
        </div>
        <div class="col-lg-6">
            Container Right
        </div>
    </div>
</div>

Answer 2

通过将列包装在父容器和弹性框中，可以将独立列彼此相邻放置。列将自动具有相等的宽度。这是一个例子。

<强> HTML

<div class="parent-container">
    <div class="container">
        <div class="row">
            <div class="col">
                Container Left
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col">
                Container Right
            </div>
        </div>
    </div>
</div>

<强> CSS

.parent-container {
   display: flex;
}

Answer 3

事情是container-fluid现在被container http://www.bootply.com/bootstrap-3-migration-guide取代，但事实并非如此。尝试将.col-md-offset-*列移到您的列右侧的*。看看http://getbootstrap.com/css/#grid

如何将两个容器并排放置在自举中？

3 个答案: