5 个相等的列仅适用于大屏幕 - twitter bootstrap

Posted 2023-03-21

【中文标题】5 个相等的列仅适用于大屏幕 - twitter bootstrap

【英文标题】：5 equal columns for large screen only - bootstrap 5

【发布时间】：2022-01-14 07:27:14

【问题描述】：

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

** 上面的代码将为所有屏幕创建 5 个相等的列 - 但我希望它仅适用于中型和大屏幕。对于小屏幕，我想要一个全宽列。 **

【问题讨论】：

投反对票可能是因为这些年来有很多类似的问题，也因为这在Bootstrap's very good documentation 中非常清楚。不要让它气馁。继续编码并继续发布！

这是一个几乎重复的例子，例如：How can I change Bootstrap columns sizing based on screen size? 问题有点不同，但答案显示了相同的解决方案。

【参考方案1】：

检查the documentation - 您需要使用col-md 来指定您只希望在中等屏幕或更大屏幕上显示列。

<div class="row">
   <div class="col-md">
      1 of 5
   </div>
   <div class="col-md">
      2 of 5
   </div>
   <div class="col-md">
      3 of 5
   </div>
   <div class="col-md">
      4 of 5
   </div>
   <div class="col-md">
      5 of 5
   </div>
</div>

【参考方案2】：

.aligin 
  margin: auto !important;
  text-align:center;

<div class="row aligin">
  <div class="col-md">
    1 of 5
  </div>
  <div class="col-md">
    2 of 5
  </div>
  <div class="col-md">
    3 of 5
  </div>
  <div class="col-md">
    4 of 5
  </div>

【讨论】：

Bootstrap 中的布局很少需要自定义 CSS。此外，col-md 不是有效的 Bootstrap 类。