Html Bootstrap Columns 不是並排堆疊

Question

大家好，我想了解為什么我的列堆疊在一起而不是並排。 這是我的頁面的屏幕截圖：購物車上方的所有內容我想位於主頁內容的右側，例如側欄，但我正在努力實現這一目標

這是我的 html

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-md-6 col-lg-8">
            <app-grocery-sidebar></app-grocery-sidebar>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8">
            <recipes></recipes>
        </div>
    </div>
   
</div>

Answer 1

bootstrap 網格系統每行有 12 列。 如果總列數大於 12，則備用列將換行到下一行。

在您的示例中，對於小屏幕，您有 2 個col-sm-9類，總共 18 列。 對於中等屏幕，您有 2 x col-md-6類，總共有 12 列，因此對於此屏幕尺寸應該可以正常工作，每列應該具有相同的寬度。 對於大屏幕，您有 2 個col-lg-8類，總共 16 列。

您需要決定您希望側邊欄在大屏幕上占據的屏幕百分比。 例如，假設您希望它占據屏幕的 25%，那么您應該將col-lg-3分配給側邊欄，將col-lg-9分配給食譜。 如果您希望所有屏幕尺寸都如此，請分別使用col-3和col-9 。

如果您想為側邊欄提供 33% 的屏幕，那么您應該分別使用col-lg-4和col-lg-8 。

col-lg-2和col-lg-10將為側邊欄提供 16.6% 的屏幕，為食譜提供 83.3% 的屏幕。

兩者的col-md-6將在中等大小的屏幕上為每個元素提供相同的屏幕寬度。

如果您希望所有列占用相等的空間，您也可以在每個元素上使用col類。

閱讀有關其網格系統的 Bootstrap 文檔的更多信息。