我正在尝试水平对齐我的列表组，当前的行为如下：
http://i.imgur.com/OPTebN3.png
我想要的是将列表组显示在下一行上，即高度最大的上方列表组的正下方。
它们都放在同一行中，每行6列。我的代码如下所示：
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Soveværelser</h4>
<ul class="ul-with-bullets">
<li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
<li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Toiletter</h4>
<ul class="ul-with-bullets">
<li>Nr 1: WC. Varmt og koldt vand</li>
</ul>
</div>
</div>
</div>
我想避免为每个第二个列表组创建一个新行，因为我需要在CMS系统中实现这一点。有没有更聪明的方法来建立网格？使列表组彼此对齐，同时消除空白也是可行的，但我不可能。
编辑：添加了代码更改。
<div class="row">
<div class="col-sm-12">
<div class="list-group col-sm-6">
<div class="list-group-item">
<h4 class="list-group-item-heading">Soveværelser</h4>
<ul class="ul-with-bullets">
<li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
<li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
</ul>
</div>
</div>
<div class="list-group col-sm-6">
<div class="list-group-item">
<h4 class="list-group-item-heading">Toiletter</h4>
<ul class="ul-with-bullets">
<li>Nr 1: WC. Varmt og koldt vand</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="list-group col-sm-6">
<div class="list-group-item">
<h4 class="list-group-item-heading">Andre faciliteter</h4>
<ul class="ul-with-bullets">
<li>Køkken: varmt og koldt vand</li>
<li>Gas/elkomfur</li>
<li>Opvaskemaskine</li>
</ul>
</div>
</div>
<div class="list-group col-sm-6">
<div class="list-group-item">
<h4 class="list-group-item-heading">Udenfor</h4>
<ul class="ul-with-bullets">
<li>Terrasse el. lignende</li>
<li>P-plads på grunden: 3</li>
<li>Havemøbler</li>
<li>Grill</li>
</ul>
</div>
</div>
</div>
</div>
最佳答案
嗨，您可以在这里尝试CSS Flexbox
的CSS
.row.flex-row{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.row.flex-row > div{margin-bottom: 15px;}
.row.flex-row .list-group{margin-bottom: 0;}
.row.flex-row .list-group,.row.flex-row .list-group .list-group-item{height: 100%;}
的HTML
<div class="row flex-row">
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Soveværelser</h4>
<ul class="ul-with-bullets">
<li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
<li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Toiletter</h4>
<ul class="ul-with-bullets">
<li>Nr 1: WC. Varmt og koldt vand</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Toiletter</h4>
<ul class="ul-with-bullets">
<li>Nr 1: WC. Varmt og koldt vand</li>
<li>Nr 1: WC. Varmt og koldt vand</li>
<li>Nr 1: WC. Varmt og koldt vand</li>
<li>Nr 1: WC. Varmt og koldt vand</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Toiletter</h4>
<ul class="ul-with-bullets">
<li>Nr 1: WC. Varmt og koldt vand</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Toiletter</h4>
<ul class="ul-with-bullets">
<li>Nr 1: WC. Varmt og koldt vand</li>
</ul>
</div>
</div>
</div>
</div>
关于html - 水平对齐高度可变的列表组( bootstrap 3)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45833758/