在较大的屏幕上从2x5列更改为1x10

Question

我想这个问题的解决方案非常简单，但我很难挣扎。我有10个图标，我想在中间居中，在大屏幕上一行显示，然后在较小的屏幕上更改为两行5个图标。我应该如何使用bootstrap编写代码？

<div class="row">
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/1_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/2_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/3_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/4_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/5_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/6_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/7_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/8_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/9_g.png"></div>
          <div class="col"><img class="img-fluid cat_icon" src="img/Icons/10_g.png"></div>
        </div>

它现在的行为方式是定期调整大小，例如在某些宽度上显示为1x7,1x3。我希望它只有两个选项：1x10或2x5。

Answer 1

使用Bootstrap，您可以添加以下类：

• 超小（<576px）:.
• 小（≥576px）:. ol-sm-
• 中等（≥768px）:. col-md-
• 大（≥992px）:. ol-lg-
• 超大（≥1200px）：。col-xl-

因此，对于您的情况，您可以执行以下操作：

<div class="col col-lg-2"><img class="img-fluid cat_icon" src="img/Icons/1_g.png"></div>