调整大小时Bootstrap列不起作用

Question

我遇到了一个问题，如果我将浏览器的大小调整为小尺寸，则列不起作用，而是每个图像显示在不同的行中。它显示在这里：

它可以在更大的尺寸下正常工作，连续显示四个图像。有谁知道解决这个问题吗？

<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="col-sm-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="col-sm-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="col-sm-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
    </div>
  </div>
</div>

Answer 1

首先，你不应该使用两个容器。其次：

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-3">
        <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="col-sm-3">
        <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="col-sm-3">
        <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="col-sm-3">
        <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

这符合预期，因为col-sm-*仅适用于767px以上。您应该将col-xs-*用于较小的屏幕。

Answer 2

平板电脑视图的

col-sm-。移动视图col-xs-。

  <div class="container-fluid">
    <div class="row">
      <div class=" col-sm-3 col-xs-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class=" col-sm-3 col-xs-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="  col-sm-3 col-xs-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
      <div class="  col-sm-3 col-xs-3">
        <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a>
      </div>
    </div>
  </div>

Answer 3

请从img标签中删除width =“187”和height =“267”。而不是这个你可以添加style =“max-width：187 px; width：100％;”使用img标签。我认为它会起作用。请试试。 在移动设备中，如果要在一行中看到4个图像，则应将“col-xs-3”类添加为“col-sm3”。