Используя класс "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>

Но когда я делаю это, я получаю две строки, даже когда они не отвечают, а не ту, которую я хотел.

Answer 1

Если я вас правильно понимаю, вы хотите, чтобы элементы имели размер 3 столбцов (т.е. 4 столбца в каждой строке), когда размер экрана XS , и имели равные ширины столбцов, когда размер экрана больше или равна некоторой точке останова (в этом примере я буду использовать 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>