Question

所以我有各种不同尺寸的UI组件，我将它们放在一个页面中。我想在网格中水平排列它们，每行应该等于该行中具有最大高度的组件的高度。每行没有固定数量的列。组件应彼此相邻放置而不更改其尺寸，如果该行中没有剩余空间，则应自动换行到下一行。

我尝试使用bootstrap，但我必须为每个组件指定列宽，例如col-xs-number，我不能这样做，因为我无法冻结一行中的项目数。

编辑：应用程序使用bootstrap版本3，因此无法使用V4。

这可能吗？

Answer 1

你可以在没有任何类型的Bootstrap的情况下完成，只需使用<body>元素。

下面是一个演示，我在容器div中添加了12个不同高度的元素，每次运行时，容器div的宽度都设置为一个随机值，以显示每次的换行方式。

display: inline-block

var heights = [100, 20, 80, 140, 65, 90, 30, 70, 130, 55, 75, 100];
for (var i = 0; i < heights.length; i++) {
  $('#x').append($('<div style="height:' + heights[i] + 'px"></div>'))
}
var w = Math.floor((Math.random() * 400) + 100);
$('#x').css("width", w + "px");

#x div {
  display: inline-block;
  vertical-align: text-top;
  width: 50px;
  background: green;
  margin: 10px;
}

#x {
  border: solid 1px #888
}

Answer 2

检查flexbox，bootstrap 4正在使用flexbox，因此您可以使用没有数字的列。

示例：

＆＃13;

.container{
  border:1px solid black;
}

.col:first-of-type{
  background:white;
}


.col:nth-of-type(2){
  background:green;
}

.col:last-of-type{
  background:red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
  <div class="row">
    <div class="col">First</div>
    <div class="col">Second</div>
    <div class="col">Third</div>
  </div>
</div>

＆＃13;

在网格中排列不同高度的项目

2 个答案: