Question

我是bootstrap的新手，遇到排列图像的问题。

基本上，我想要的是：

IMG1  IMG2  IMG3  IMG4

IMG5  IMG6

但是，我得到的是，例如：

IMG1  IMG2  IMG3  IMG4
                  IMG5 
IMG6

IMG4比其他IMG4高，IMG4和IMG5在我希望只有一张图像的单元格中相互叠加。

此部分的代码如下所示：

<div class="row">

  <div class="col-sm-6 col-lg-3">
    <img class="img-responsive" src="xxx">
  </div>

  <div class="col-sm-6 col-lg-3">
    <img class="img-responsive" src="xxx">
  </div>

  <div class="col-sm-6 col-lg-3">
    <img class="img-responsive" src="xxx">
  </div>

   ...
</div>

在窄窗口中从4列到2列的更改按预期工作，但跨行的图像分布不会。

Answer 1

您可以使用简单的CSS修复它：

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed可以防止破坏col- *类的功能。

您还可以查看this

引导行不按预期填充

1 个答案: