文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我如何在引导程序的行-col中生成响应映像？

问我如何在引导程序的行-col中生成响应映像？
EN

Stack Overflow用户
提问于 2020-09-03 20:08:47
回答 2查看 809关注 0票数 0

我创建了一个显示标识的“网格”。一些标识是.svg的，另一些是.png的。我正在起诉引导程序的row-col来创建这个网格。在桌面上，我使用的是row-cols-lg-3，它工作得很好，它有3列。在移动设备中，我需要它有2列，所以我使用的是row-cols-sm-2。然而，它只显示了一列。徽标需要响应，所以我想使用%而不是px来设置它们的宽度。当我使用px时，这两列工作得很好。当我使用%它没有，实际上一些标志甚至消失了。

这就是我希望用width: x%而不是width:ypx实现的。

​

​

上面的图像显示了当我使用%(注意其他标识已经消失)时得到了什么：

​

这是我的密码：

​

代码语言：javascript
复制
/* 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%;
}
代码语言：javascript
复制
<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>

​

html
css
twitter-bootstrap
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-09-03 20:53:12

这是你想要做的还是你想做的其他事情？

​

代码语言：javascript
复制
.logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

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

.logo-grid img {
  width: 100%;
}
代码语言：javascript
复制
<!-- 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 ">

​

如果没有，请让我知道在一个评论，我会尽我最大的努力编辑答案，以满足您的要求。

票数 0
EN

Stack Overflow用户

发布于 2020-09-03 21:21:48

问题：

问题是，您还没有为小于576 is ( row-cols断点)的屏幕设置一个sm类--您尝试使用row-cols-xs-2，但是在Bootstrap 4中没有xs断点。这意味着在小屏幕上应用默认的row-cols CSS，并且它试图将所有的徽标都放在一行中(因为这些类使用的是柔性盒).它们“消失”的原因是因为它们太小，不适合。

如何解决它：

您只需要将row-cols-2添加到row div中，这样它就可以在较小的屏幕上使用2科尔。另外，您不需要为每个断点设置行-cols-较小的断点，直到它到达较大的断点为止：

代码语言：javascript
复制
<div class="row row-cols-lg-3 rows-cols-2 logo-grid">

img-流体与宽度:100%

另外，如果要使用Bootstrap的img-fluid类，则不需要自定义CSS来设置宽度。在下面的示例中，我添加了img-fluid以获得div，而另一半有width:100% (它们与黄色相邻，因此您可以看到哪个是哪个)。它们的作用是相同的，所以这取决于您是想在每个图像中添加类还是在您自己的CSS中复制样式。

另外，你的CSS有一个问题-你不应该在am图像上设置padding -填充进入元素，所以它没有意义的图像-使用margin代替。

使用所有这些的工作示例！

​

代码语言：javascript
复制
/* 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%;
}
代码语言：javascript
复制
<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-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-2 logo-grid">
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Tebex"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Payvalida"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Pago Efectivo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Prestashop"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo WHMOS"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Paysafe Card"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo FHL Games"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Kaybo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Jumpseller"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Openbucks"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid"  alt="Logo Fortumo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid"  alt="Icono +1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63730972

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档