使用"col“和"col-3”类

Question

我使用类"col“来创建7个相等的列，当响应时，我希望有两行。一个列4列，另一个列3。

<div class="row mt-20">
        <div class="col col-3">
            <img src="assets/img/cegh.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/usp.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/butanta.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/fapesp.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/inct.png" width="80%">
        </div>
        <div class="col col-3">
            <img src="assets/img/analitica.png" width="80%">
        </div>
        <div class="col col-3 mb-5">
            <img src="assets/img/abcam.png" width="80%">
        </div>
    </div>

但是当我这样做的时候，我得到了两行，即使没有响应，而不是我想要的7行。

Answer 1

如果我正确理解，您希望在屏幕大小为3 XS时，使用列大小(即每行4列)的元素，并在屏幕大小大于或等于某个断点时拥有相同宽度的列(在本例中，我将使用SM)。这可以通过类col-3 col-{breakpoint}的连接来处理，如下一个breakpoint = SM示例所示(仅为好看添加了边距顶部)：

​

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  <div class="col-3 col-sm mt-1">
    <img src="https://via.placeholder.com/50" width="80%">
  </div>
  
</div>
</div>

​