有没有一种方法可以使 Bootstrap (5) 列在小的情况下堆叠，但在中等和以上的情况下弯曲？

Question

我有一组要动态添加的列（可能是 2，最多可能是 5）。我希望这些在小屏幕上垂直堆叠 (.col-sm-12)，但在中等和更高的屏幕上水平显示。

但是，如果我执行类似下面的操作，列仍然全部继承 col-sm-12。

<div class="row">
 <div class="col col-sm-12">content</div>
 <div class="col col-sm-12">content</div>
 <div class="col col-sm-12">content</div>
 <div class="col col-sm-12">content</div>
</div>

有没有办法让列在小屏幕上为 100% 宽度，但在其他屏幕尺寸上为 flex？

Answer 1

我们在 bootstrap 中使用 12 列网格系统。这意味着将容器（或者在某种意义上，- 存储内容的地方）划分为 12 个垂直列。这里你使用了 col-sm-12 和 col

col-sm-12 ：表示您的内容或 div 将跨越 div 的整个宽度（除非它是明确提及）。

col : 如果简单的放col这些div会等宽水平堆叠，并根据屏幕大小调整大小，但不管它们不会垂直堆叠。

您可以在 bootstrap 文档

中查看有关网格系统 here 的更多详细信息

为了实现你想要的，你可以使用这样的东西

             <div class="row">
              <div class="col-12 col-md">content</div>
              <div class="col-12 col-md">content</div>
              <div class="col-12 col-md">content</div>
              <div class="col-12 col-md">content</div>
             </div>

如果这些是类，则中等大小屏幕以上的列将水平跨度且大小可变，而以下的列将占据整个 12 列宽度。如果您想进一步了解 bootstrap 中的网格系统类，您也可以参考此 SO answer。

Answer 2

只需使用col-md...

Demo

<div class="row">
    <div class="col-md">content</div>
    <div class="col-md">content</div>
    <div class="col-md">content</div>
    <div class="col-md">content</div>
</div>

因为 explained in the docs 自动布局列是响应式的。因此，您可以简单地设置 md 断点，md 下方将垂直堆叠。

另一种选择是使用 row columns

   <div class="row row-cols-1 row-cols-md-4">
        <div class="col">content</div>
        <div class="col">content</div>
        <div class="col">content</div>
        <div class="col">content</div>
   </div>

有没有一种方法可以使 Bootstrap (5) 列在小的情况下堆叠，但在中等和以上的情况下弯曲？

Is there a way to make Bootsrap (5) columns stack on small, but flex on medium and up?

twitter-bootstrap

bootstrap-5