Question

我有以下2个引导程序列（每个都有产品说明和价格信息）：

<div class="row">
    <div class="col-md-4">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <ul>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
            </ul>
            <table class="table table-sm table-bordered price-table">
                <tbody>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr class="table-success">
                        <td>info</td>
                        <td>info</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    Lorem.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <ul>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
                <li>
                    text
                </li>
            </ul>
            <table class="table table-sm table-bordered price-table">
                <tbody>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr>
                        <td>info</td>
                        <td>info</td>
                    </tr>
                    <tr class="table-success">
                        <td>info</td>
                        <td>info</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    Lorem.
                </p>
            </div>
        </div>
    </div>
</div>

我们可以看到ul元素具有不同的元素数，因此具有不同的高度，这很烦人。我想要实现的是：

我希望这些列具有相同的高度。
我希望table元素始终保持在列的底部，否则ul应该填充100％的可用区域。

我该怎么做？预先非常感谢。

Answer 1

您可以将mb-auto类添加到ul中。这会将其下面的所有内容推到底部。为此，您确实需要将父容器作为flex容器。列中有一个额外的div。在此div中添加d-flex flex-column类。另外，您可以删除冗余div并将类添加到div列中。

<div class="row">
    <div class="col-md-4">
        <div class="d-flex flex-column h-100">
           ...
        <ul class="mb-auto">

我用demo

制作了一个代码笔

编辑：设置内部div的样式时，需要h-100才能获得全高，以便所有列都保持相同的高度。

Answer 2

.row .col-md-4 {
  display: flex;
}
.row .col-md-4 > div {
  display: flex;
  flex-direction: column;
}
.row .col-md-4 > div > table {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-4">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <ul>
        <li>
          text
        </li>
        <li>
          text
        </li>
      </ul>
      <table class="table table-sm table-bordered price-table">
        <tbody>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr class="table-success">
            <td>info</td>
            <td>info</td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          Lorem.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <ul>
        <li>
          text
        </li>
        <li>
          text
        </li>
        <li>
          text
        </li>
        <li>
          text
        </li>
      </ul>
      <table class="table table-sm table-bordered price-table">
        <tbody>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr>
            <td>info</td>
            <td>info</td>
          </tr>
          <tr class="table-success">
            <td>info</td>
            <td>info</td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          Lorem.
        </p>
      </div>
    </div>
  </div>
</div>

Answer 3

简单的解决方法是增加您的身高。

ul {
height: 100vh;
}

但是您还应该在两个col-4中都添加行。

使列内的元素停留在底部

3 个答案: