Question

所以目前我正在网站上工作（我使用Bootstrap 3来设计我的网站）。在主页上，我想要一系列缩略图，在网站的不同部分给出标题和简要说明。我已经能够对此进行编程，但我也希望缩略图连续四列，但它会在列中弹出四行。我正在使用bootstrap中的类，行和col-md-4，从我看到的，应该自动将缩略图放入四行。

有谁能想到我可能做错了什么？如果您需要了解更多详情，请询问我所写的内容。

谢谢！

Answer 1

Twitter bootstrap 3旨在用于开箱即用的多种屏幕分辨率。因此，根据屏幕的大小，内容将重新构建为采用完整的可用宽度或预设宽度。

在您的情况下，您需要一个包含四列的单行，我怀疑这是因为您正在查看该页面的屏幕，或者容器的宽度小于md大小宽度（大于或等于992px - 见http://getbootstrap.com/css/#grid-options）。

因此，您可以使用其中一个较低分辨率的前缀（sm或xs）或增加容器的宽度。

请参阅示例小提琴 - http://jsfiddle.net/ay3oL496/ - 以了解屏幕分辨率如何影响各种col-类。增加预览选项卡的宽度，各种元素应调整大小。

//更新以下代码示例

感谢代码示例 - 现在问题很明显。请参阅 - http://jsfiddle.net/x6vqrck9/1/处的解决方案。

您遇到的问题是由于每列之后添加了<div class="row">语法 - 实际上每行有一列。此外，您正在使用col-md-4 - 这将导致每行3列（有12个网格列，您使用4来显示每个元素）。

结构应该是

<div class="container">
   <div class="row">
      <div class="col-md-3">Content here</div>
      <div class="col-md-3">Content here</div>
      <div class="col-md-3">Content here</div>
      <div class="col-md-3">Content here</div>
   </div>
   <div class="row">Other site content here</div>
</div>

小提琴中的代码纠正了这些问题以及添加jQuery和引导库。

我的缩略图不会进入多列，我做错了什么？

1 个答案: