Question

我制作了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>

Answer 1

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

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

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

Answer 2

删除了图片标签，并将这些样式添加到了包含图片的div

.bgLightOn {
    background-image: url('/Images/LightBulbOn.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    width: 70px;
    height: 110px;
}

Answer 3

我在图像中看到，LightBulbOff和LightBulbOn图像的高度略有不同。两个图像的高度必须具有相同的大小。或者，您可以在每第12张图像之后使用clearfix类。

Bootstrap第13列垂直显示

3 个答案: