Bootstrap：在小型设备上使列大小始终为 12，但在其他设备上为默认行为答案

【问题标题】：Bootstrap: Make column size always 12 on small device but default behaviour on other devicesBootstrap：在小型设备上使列大小始终为 12，但在其他设备上为默认行为
【发布时间】：2020-03-10 04:29:56
【问题描述】：

所以我有一个可以容纳可变数量元素的组件。

我想要的是让元素在另一个下对齐并占据整个容器宽度当屏幕较小时，但在较大屏幕中具有默认的 Bootstrap 列行为。

我想要这样的东西：

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

【问题讨论】：

bootstrap 应该已经根据屏幕宽度推送项目，你能告诉我们你尝试过的代码吗？
你想让你的元素在大屏幕上也全宽吗？

标签： html css bootstrap-4

【解决方案1】：

试试col-md

<div class="row">
 <div class="col-sm-12 col-md">s</div>
 <div class="col-sm-12 col-md">s</div>
 <div class="col-sm-12 col-md">s</div>
 .
 .
 .
 </div>
</div>

【讨论】：

工作就像一个魅力，谢谢！

【解决方案2】：

让我们举个例子，你有 3 列你想将它们并排显示，而在移动屏幕上你想将它们显示在另一列下。

这将是代码

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

列长取决于您要显示的列号

查看链接了解更多详情。 https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

谢谢！！

【讨论】：

【解决方案3】：

仅使用col-sm，那么这些列在移动设备上将是全宽 (xs)..

https://www.codeply.com/p/ovXfFNTSce

<div class="row">
    <div class="col-sm"> . </div>
    <div class="col-sm"> . </div>
    <div class="col-sm"> . </div>
    <div class="col-sm"> . </div>
</div>

【讨论】：