Bootstrap 未在移动设备上折叠成两列

Question

我正在尝试非常简单地将单行 4 张图片（代码段中的尺寸准确无误）转换为平板电脑和移动设备上的两列。问题是它分成一列，所有 4 个都堆叠在一起。

基本上，任何比桌面小的东西我都希望它们是两列，所以图像会缩小以适应 2 列结构。

我做错了什么？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

更新：平板电脑似乎适用于 2 列，但移动设备显示如下：

Answer 1

将代码更新为 col-6（不需要大小修饰符），并在图像上添加 img-fluid class，以便它们随容器缩放。

代码段按预期工作 - 两列直到 992px window 宽度。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
  <div class="col-lg-3 col-6">
    <img src="https://via.placeholder.com/300x70" class="img-fluid">
  </div>
</div>

Answer 2

使用 Bootstrap 的网格系统，您可以在移动设备上使用 col-6 从屏幕宽度的 50% 开始，然后在桌面设备上使用 col-lg-3 增加到 25% .我还在您的标签中添加了 img-fluid class 以确保图像自动适应您的屏幕。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
<div class="col-6 col-lg-3">
          <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
          <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
         <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
<div class="col-6 col-lg-3">
        <img class="img-fluid" src="https://via.placeholder.com/300x70">
 </div>
</div>

Bootstrap 未在移动设备上折叠成两列

Bootstrap isn't collapsing into two columns on mobile

html

css

twitter-bootstrap

bootstrap-4