如何將兩個容器並排放置在引導程序中？

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>

Answer 3

問題是container-fluid現在被container http://www.bootply.com/bootstrap-3-migration-guide取代，但這不是問題。 嘗試將*列移動到您的列右側的.col-md-offset-* 。 看看這個http://getbootstrap.com/css/#grid