Question

我想解决这个问题的方法很简单，但我一直在努力。我有10个图标，我想要居中，并在大屏幕上显示为一行，然后更改为两行，每行5个图标在较小的屏幕上。我应该如何使用引导程序对此进行编码？

<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）：. col
小（≥576px）：. col-sm-
中（≥768px）：. col-md-
大（≥992px）：. col-lg-
超大（≥1200px）：. col-xl-

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

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

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

1 个答案: