Как разместить два контейнера в ботстрапе бок о бок?

Я пытаюсь разместить два контейнера бок о бок, но они сложены друг на друга. Даже класс контейнерной жидкости не помогает.

<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?

Ответы

Ответ 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>

Ответ 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>