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

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 d-flex">
    <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>