Question

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

我想要的是列表组显示在下一行，直接位于上面列表组的下方，具有最大高度。

它们全部放在同一行，每行6列。我的代码如下所示：

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

我想避免为每个第二个列表组创建一个新行，因为我需要在CMS系统中实现这一行。有没有更聪明的方法来设置网格？使列表组彼此对齐，同时消除空格也可以工作，但如果可能的话，我不是。

编辑：添加了代码更改。

{{1}}

Answer 1

我认为可以这样做的方式是这样的：我将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>

Answer 2

我不是很确定你能找到什么，但是你可以用桌子来做这件事吗？

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

Answer 3

嗨，你可以试试这里的css flexbox

<强> CSS

http://localhost:4302/auth-page/i-banking

<强> HTML

  .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%;}

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

3 个答案: