Question

我使用Bootstrap 4网格显示了6个赞助商徽标。

它们在桌面上显示非常整齐：连续的大小相似。

然而，在移动设备上，它们都属于不同大小的一列。（图像文件是各种尺寸）

以下是代码：

<div class="text-center">
  <div class="row">
    <div class="col-md-2"><img class="img-fluid" src="#" alt=""></div>
    <div class="col-md-2"><img class="img-fluid" src="#" alt=""></div>
    <div class="col-md-2"><img class="img-fluid" src="#" alt=""></div>
    <div class="col-md-2"><img class="img-fluid" src="#" alt=""></div>
    <div class="col-md-2"><img class="img-fluid" src="#" alt=""></div>
    <div class="col-md-2"><img class="img-fluid" src="#" alt=""></div>
  </div>
</div>

问题：如何使用Bootstrap列使它们具有相似的小尺寸，在sm显示屏上每行可能有2个并且更小？

另外 - 我应该使用img-fluid吗？不知道它做了什么。

Answer 1

将col-sm-6添加到每列将完成这项工作。有6个单位（12个中的单位）意味着一列将占据容器中可用宽度的一半：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mt-3">
    <div class="row">
        <div class="col-sm-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/animals" alt=""></div>
        <div class="col-sm-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/arch" alt=""></div>
        <div class="col-sm-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/nature" alt=""></div>
        <div class="col-sm-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/people" alt=""></div>
        <div class="col-sm-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/tech" alt=""></div>
        <div class="col-sm-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/animals" alt=""></div>
    </div>
</div>

＆＃13;

如果您希望所有屏幕上的2列小于md（也就是在最小的屏幕上），那么您需要col-6代替col-sm-6：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mt-3">
    <div class="row">
        <div class="col-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/animals" alt=""></div>
        <div class="col-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/arch" alt=""></div>
        <div class="col-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/nature" alt=""></div>
        <div class="col-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/people" alt=""></div>
        <div class="col-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/tech" alt=""></div>
        <div class="col-6 col-md-2 mb-3"><img class="img-fluid" src="https://placeimg.com/940/400/animals" alt=""></div>
    </div>
</div>

＆＃13;

col-* 没有中缀是默认值，即从最小屏幕开始应用的类。如果添加带有col-md-2等中缀的类，则可以从中断断点开始修改行为。

Bootstrap网格系统参考：

https://getbootstrap.com/docs/4.0/layout/grid/

使用Bootstrap 4调整sm显示的徽标

1 个答案: