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

如果我对您的理解正确，那么当屏幕尺寸为 XS 时，您希望元素的大小为3列（即每行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>

一起使用“ col”和“ col-3”类

1 个答案: