HTML Bootstrap列不并排堆积

问题描述

大家好，我想了解为什么我的各列相互堆叠而不是并排放置。这是我页面的屏幕截图：购物车上方的所有内容我都希望位于主页内容右侧，如侧边栏，但我正努力做到这一点

这是我的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>

解决方法

引导网格系统每行有12列。如果列总数大于12，则备用列将包装到下一行。

在您的示例中，对于小屏幕，您有2 x col-sm-9类，总共18列。对于中等大小的屏幕，您有2个{col-md-6类，总共12列，因此在此屏幕尺寸下应该可以正常工作，每列应具有相同的宽度。对于大屏幕，您有2 x 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类。

有关其Grid system的更多内容，请参阅Bootstrap文档。

angular bootstrap-4 html