水平对齐不同高度的列表组（Bootstrap 3）答案

【问题标题】：Aligning list groups of varied height horizontally (Bootstrap 3)水平对齐不同高度的列表组（Bootstrap 3）
【发布时间】：2025-11-22 06:55:01
【问题描述】：

我正在尝试水平对齐我的列表组，目前的行为如下：

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>

【问题讨论】：

标签： html css twitter-bootstrap list alignment

【解决方案1】：

你好，你可以在这里试试 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>

【讨论】：

谢谢，这完美！我不熟悉 CSS Flexbox，但我会研究一下。据我了解，每行上的每个列表组都会拉伸其高度以匹配该行上的最高高度。我的布局现在看起来像这样：i.imgur.com/KjXH4WW.png

【解决方案2】：

我认为可以这样做的方式是这样的：我将 col-sm-6 更改为 col-sm-12 ，然后将 col-sm-6 添加到 list-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="col-sm-12">
  <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>

【讨论】：

我尝试进行更改，但现在我的布局如下所示：i.imgur.com/R3ZTlrQ.png
我对您的代码进行了一些更改，它返回了所需的外观，但很难在 CMS 系统中实现。见编辑。
这不是你想要的吗？
我可能解释得很糟糕。我希望每行上的 2 个列表组具有相同的宽度，同时在每行上水平对齐列表组。可以有任意数量的列表组。
现在我想我明白了......不幸的是，我认为这样做的正确方法是每 2 个列表组添加一行......我能想到的任何其他解决方案都以某种方式引导...

【解决方案3】：

我不确定这是否是您要找的东西，但您可以用表格来做吗？

<table>
    <thead>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    <td>

        <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>
      </td>
      <td>

        <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>

      </td>
    </tbody>

</table>

【讨论】：