Bootstrap 4 - 将行垂直对齐到容器的底部答案

【问题标题】：Boostrap 4 - vertically align row to the bottom of a containerBootstrap 4 - 将行垂直对齐到容器的底部
【发布时间】：2021-07-12 08:42:06
【问题描述】：

我无法将一行按钮与容器的底部对齐。

参考下面的截图；一行中有 3 列组成每个部分。该行使用“justify-content-center”类将项目置于页面中间。

行的高度取决于内容最多的列。

我的目标是将第二列和第三列的按钮对齐到列的底部，以便与第一列内联。

我已经阅读了 Bootstrap 文档，并尝试了许多不同的方法，就像“align-self-send”一样，但仍然没有成功。

这是我的标记；

        <div
      class="row justify-content-center package-sections"
    >
      <div class="col-lg-3 col-md-6 m-4 p-2 package package-1">
        <h3 class="mb-3">x</h3>
        <ul>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
        </ul>
        <div class="row">
          <div class="col text-center learn-more">
            <button
              @click="
                setPackageProperties(x, x)
              "
              v-b-modal.packages-modal
              class="btn btn-learn-more"
            >
              Learn More...
            </button>
          </div>
          <div class="col text-center enquire-now">
            <router-link
              to="#contact"
              v-scroll-to="'#contact'"
              class="btn btn-enquire"
              >Enquire Now!</router-link
            >
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 m-4 p-2 package package-2">
        <h3 class="mb-3">x</h3>
        <p class="pl-3">x</p>
        <ul>
          <li>x</li>
          <li>x</li>
          <li>x</li>
        </ul>
        <div class="row">
          <div class="col text-center learn-more">
            <button
              @click="
                setPackageProperties(x, x)
              "
              v-b-modal.packages-modal
              class="btn btn-learn-more"
            >
              Learn More...
            </button>
          </div>
          <div class="col text-center enquire-now">
            <router-link
              to="#contact"
              v-scroll-to="'#contact'"
              class="btn btn-enquire"
              >Enquire Now!</router-link
            >
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 m-4 p-2 package package-3">
        <h3 class="mb-3">x</h3>
        <p class="pl-3">x</p>
        <ul>
          <li>x</li>
          <li>x</li>
          <li>x</li>
        </ul>
        <div class="row">
          <div class="col text-center learn-more">
            <button
              @click="
                setPackageProperties(x, x)
              "
              v-b-modal.packages-modal
              class="btn btn-learn-more"
            >
              Learn More...
            </button>
          </div>
          <div class="col text-center enquire-now">
            <router-link
              to="#contact"
              v-scroll-to="'#contact'"
              class="btn btn-enquire"
              >Enquire Now!</router-link
            >
          </div>
        </div>
      </div>
    </div>

注意：任何自定义 CSS 类都只是设置文本样式或应用颜色。

【问题讨论】：

标签： bootstrap-4 vertical-alignment

【解决方案1】：

您可以使用 flex，将 .d-flex .flex-column 添加到您的 div.packages 和 .flex-grow-1 到您想要增长的嵌套元素以填充空间。

在下面的示例中，我只是在ul 之后添加了一个div.flex-grow-1，但您可以将该类直接应用于ul。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row justify-content-center package-sections">
  <div class="col-lg-3 col-md-6 m-4 p-2 package package-1 d-flex flex-column">
    <h3 class="mb-3">x</h3>
    <ul>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
    </ul>
    <div class="flex-grow-1"></div>
    <div class="row">
      <div class="col text-center learn-more">
        <button @click="
                setPackageProperties(x, x)
              " v-b-modal.packages-modal class="btn btn-learn-more">
           Learn More...
         </button>
      </div>
      <div class="col text-center enquire-now">
        <router-link to="#contact" v-scroll-to="'#contact'" class="btn btn-enquire">Enquire Now!</router-link>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 m-4 p-2 package package-2 d-flex flex-column">
    <h3 class="mb-3">x</h3>
    <p class="pl-3">x</p>
    <ul>
      <li>x</li>
      <li>x</li>
      <li>x</li>
    </ul>
    <div class="flex-grow-1"></div>
    <div class="row ">
      <div class="col text-center learn-more">
        <button @click="
                setPackageProperties(x, x)
              " v-b-modal.packages-modal class="btn btn-learn-more">
           Learn More...
         </button>
      </div>
      <div class="col text-center enquire-now">
        <router-link to="#contact" v-scroll-to="'#contact'" class="btn btn-enquire">Enquire Now!</router-link>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 m-4 p-2 package package-3 d-flex flex-column">
    <h3 class="mb-3">x</h3>
    <p class="pl-3">x</p>
    <ul>
      <li>x</li>
      <li>x</li>
      <li>x</li>
    </ul>
    <div class="flex-grow-1"></div>
    <div class="row">
      <div class="col text-center learn-more">
        <button @click="
                setPackageProperties(x, x)
              " v-b-modal.packages-modal class="btn btn-learn-more">
           Learn More...
         </button>
      </div>
      <div class="col text-center enquire-now">
        <router-link to="#contact" v-scroll-to="'#contact'" class="btn btn-enquire">Enquire Now!</router-link>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

检查下面的代码我在标签后写描述以供您理解。你必须在剩下的列中做同样的事情，我猜是包 2 和包 3。

<div class="col-lg-3 col-md-6 m-4 p-2 package package-1 d-flex flex-column"> -- **your col div add d-flex flex-column classes**

... 

    <div class="row mt-auto">  --- **your buttons div add mt-auto class**
          ...
    </div>

</div>

【讨论】：