使列内的元素保持在底部答案

【问题标题】：Make element inside of columns stay at the bottom使列内的元素保持在底部
【发布时间】：2019-02-25 11:38:41
【问题描述】：

我有以下 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% 的空闲区域。

我该怎么做？非常感谢您。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： html css twitter-bootstrap bootstrap-4 multiple-columns

【解决方案1】：

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

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

我用demo做了一个codepen

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

【讨论】：

这在什么方面不起作用？您希望列具有相同的高度，对吗？这样，它们将始终与一行中最高的列一样高。
这对我不起作用，因为您在col-md-4 之后错过了一个div，我在我的示例中就有。
如果您阅读了我的回复，我会告诉您，您可以设置一个样式，或者删除它并将其设置为父级。
我需要它，我不能删除它。
然后设置样式而不是列

【解决方案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>

【讨论】：

你的新 CSS 对我没有任何改变。
仅在它们彼此相邻时显示。为此，您需要单击右侧与Run code snippet 按钮位于同一行的Full page 链接

【解决方案3】：

简单的解决方案是为您的 ul 添加一个高度。

ul {
height: 100vh;
}

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

【讨论】：

确实占用了比需要更多的空间，而且看起来很丑。
您可以更改该值。