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

Question

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

参考下面的截图；一行中有 3 列组成每个部分。该行使用 class '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 class 都只是样式文本或应用颜色。

Answer 1

您可以使用 flex，将 .d-flex .flex-column 添加到您的 div.package 并将 .flex-grow-1 添加到您想要增长的嵌套元素以填充 space.

在下面的示例中，我只是在 ul 之后添加了一个 div.flex-grow-1，但您可以直接将 class 应用于 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>

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

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

Boostrap 4 - vertically align row to the bottom of a container

bootstrap-4

vertical-alignment