如何在引导程序的row-col div中制作响应式图像？

问题描述

我创建了一个显示徽标的“网格”。一些徽标是.svg，其他徽标是.png。我正在使用引导程序的row-col创建此网格。在台式机上，我使用的是row-cols-lg-3，它可以正常工作，它有3列。在移动设备中，我需要它具有2列，因此我正在使用row-cols-sm-2。但是，它仅显示一列。徽标需要响应，因此我想使用％而不是px设置徽标的宽度。当我使用px时，两列工作正常。当我不使用％时，实际上有些徽标甚至消失了。

这是我需要使用width: x%而不是width:ypx来实现的目标

上图显示了使用％时得到的结果（注意其他徽标已消失）：

这是我的代码：

/* CSS for Desktop View */

.logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <p></p>
        </div>


        <!-- The logo Grid -->

        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-2 row-cols-xs-2 logo-grid">
            <div class="col"><img src="images/logo-tebex.svg" alt="logo Tebex"></div>
            <div class="col"><img src="images/logo-payvalida.png" alt="logo Payvalida"></div>
            <div class="col"><img src="images/logo-pago-efectivo.svg" alt="logo Pago Efectivo"></div>
            <div class="col"><img src="images/logo-prestashop.svg" alt="logo Prestashop"></div>
            <div class="col"><img src="images/logo-whmos.svg" alt="logo WHMOS"></div>
            <div class="col"><img src="images/logo-paysafecard.svg" alt="logo Paysafe Card"></div>
            <div class="col"><img src="images/logo-fhlgames.png" alt="logo FHL Games"></div>
            <div class="col"><img src="images/logo-kaybo.png" alt="logo Kaybo"></div>
            <div class="col"><img src="images/logo-jumpseller.svg" alt="logo Jumpseller"></div>
            <div class="col"><img src="images/logo-openbucks.png" alt="logo Openbucks"></div>
            <div class="col"><img src="images/logo-fortumo.png" alt="logo Fortumo"></div>
            <div class="col"><img src="images/logo-1k.svg" alt="Icono +1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

解决方法

问题：

问题是您没有为小于576像素（断点row-cols）的屏幕设置sm类-您尝试使用row-cols-xs-2，但没有{{1} }在Bootstrap 4中的断点。这意味着在小屏幕上将应用默认的xs CSS，并且它试图将所有徽标都放在一行中（因为这些类使用的是flexbox）……“消失”是因为它们太小而无法容纳。

解决方法：

您只需要在row-cols div中添加row-cols-2，以便在较小的屏幕上使用2个列。另外，您无需为每个断点都设置行间隔-较小的断点将应用到到达较大的断点为止：

row

img流体与宽度：100％

此外，如果要使用Bootstrap的 img-fluid 类，则不需要自定义CSS来设置宽度。在下面的示例中，我添加了<div class="row row-cols-lg-3 rows-cols-2 logo-grid">来使div，另一半添加了img-fluid（它们以黄色为边框，因此您可以看到是哪个）。它们的作用相同，因此仅取决于您是要向每个图像添加类还是要在自己的CSS中复制样式。

也供您参考，CSS出现了问题-您不应该在图片上设置width:100%-填充会放在元素内，因此对于图片来说没有意义-请改用padding。

所有示例的工作示例！

margin

/* CSS for Desktop View */
.logo-grid img {
  margin: 15px 0;
}

/* CSS for Desktop View */

.logo-grid img:not(.img-fluid) {
  width: 100%;
  border: 3px solid yellow;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}

这是您要尝试做的还是要做其他事情？？

.logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
          <p></p>
        </div>
        <!-- The Logo Grid -->
        <div class=" col-lg-6 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 logo-grid">
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/200" alt="Logo Tebex"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/201" alt="Logo Payvalida"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/202" alt="Logo Pago Efectivo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/203" alt="Logo Prestashop"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/204" alt="Logo WHMOS"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/205" alt="Logo Paysafe Card"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/206" alt="Logo FHL Games"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/207" alt="Logo Kaybo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/208" alt="Logo Jumpseller"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/209" alt="Logo Openbucks"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/210" alt="Logo Fortumo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/211" alt="Icono +1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JS,Popper.js,and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- <script type=" text/javascript ">

如果没有，请在评论中让我知道。我将尽力编辑答案以满足您的要求。

html twitter-bootstrap