时间戳

首页 > 解决方案 > Bootstrap 第 13 列垂直显示

html - Bootstrap 第 13 列垂直显示

问题描述

我做了一行 100 列，每列都应该尽可能小。但正如你在下面看到的第 13 列表现得很奇怪。所有图像和列都是使用相同的代码生成的，因此每个高度应该相同。我确实知道引导程序的 12 列规则，但我可以接受它在 12 或 40 处环绕我在应用程序中没有宽度规则。此外，如果有人可以帮助图像响应，但列数不是，如果我缩小窗口，它会直接进入每行一列，而不是说 11，然后是 10，依此类推。

在此处输入图像描述

<div class="form-horizontal container" id="ActualHallOfLights">
  <div class="row">
    <div class="thumbnail col-sm-1"> 1:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 2:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 3:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 4:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 5:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 6:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 7:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 8:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 9:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 10:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 11:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 12:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 13:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
    <div class="thumbnail col-sm-1"> 14:False
      <Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
    </div>
    <div class="thumbnail col-sm-1"> 15:True
      <Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
    </div>
  </div>
</div>

标签： htmlcsstwitter-bootstrap-3

解决方案

您的图像的高度可能略有不同，可能是由于亚像素舍入。因此，包含它们的列元素也会有所不同。这会破坏浮动行为。

一种常见的解决方案是在列（或图像）上设置最小高度。另一种是将图像设置为背景，大小为cover，并使用响应元素设置高度。您可以确保您的图像都具有完全相同的原始尺寸，但这是一种脆弱的方法。即使是一张错误的图像也会破坏布局。

无论如何，它们都需要具有相同的高度。

推荐阅读