Question

您好，我正在努力做到这一点，但我的第四个框到底了这是我的代码。请帮我搞清楚。提前谢谢大家。

<div class="offer">
<h2>Current Offers</h2>
<div class="container text-center">
  <div class="row">
    <div class="col-sm-3 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="images/img1.jpg" alt="Image 1">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-orange" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-3 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="images/img1.jpg" alt="...">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-teal" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-3 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="images/img1.jpg" alt="...">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-red" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-3 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="images/img1.jpg" alt="...">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-red" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
  </div>
  </div>

和CSS

.thumbnail.checkout-thumbnail {
  background: #eee;
  border:none;
  max-width: 220px;

}
.caption.checkout-caption {
  margin-top: 2px;
}
.btn.btn-checkout {
  border-radius: 0;
  border: none;
  background: none;
  margin-top: 30px;
}
.btn.btn-orange {
  border: 2px solid orange;
}
.btn.btn-teal {
  border: 2px solid teal;
}
.btn.btn-red {
  border: 2px solid red;
}

请在此处查看图片以便您了解，我正在尝试将其设为image

Answer 1

您的准则工作正常。您是在小尺寸屏幕（最大768px）还是中等屏幕（最小769和最大992）测试您的代码。我已经测试过你的代码在小屏幕上，它工作正常。正如您将12列分为4 col-sm-3。

但是当谈到中画面时，你已经将12列分成了只有三列col-md-4。根据你的编码，第四列肯定会在中等大小的屏幕上下降。因此，如果您想在中等屏幕中维护四列，则必须将col-md-4更改为col-md-3。

Answer 2

正如我在您的HTML代码中看到的那样，您使用了col-md-4代替col-md-3，我希望这可以解决您的疑问。

如您所知，bootstrap网格有12列，因此您必须使用col-md-3连续获得4列。

Answer 3

你应该使用

col-md-3

而不是

col-md-4

显示宽度≥992px

的桌面的一行中的所有四个框

在bootstrap中制作4个响应框

3 个答案: