引导4-将行垂直对齐到容器的底部。

Question

我很难将一行按钮对齐到容器的底部。

引用下面的屏幕截图；在一行中有3列组成每个部分。该行使用类“对齐-内容-中心”来对页中间的项进行居中。

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

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

我已经看过Bootstrap文档，并尝试了许多不同的方法，就像“对齐-自我发送”一样，但仍然没有成功。

​

​

这是我的标记；

        <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类都只是样式化文本或应用颜色。

Answer 1

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

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

​

• https://getbootstrap.com/docs/4.6/utilities/flex/
• https://getbootstrap.com/docs/4.6/utilities/flex/#direction
• https://getbootstrap.com/docs/4.6/utilities/flex/#grow-and-shrink

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>