css - 调整大小时 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

首先，您不应该使用两个容器。其次:

<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>

这按预期工作，因为 col-sm-* 仅在 767px 以上应用。对于较小的屏幕，您应该使用 col-xs-*。