Bootstrap 网格元素 - 将大部分内容垂直对齐到顶部，但按钮垂直对齐到底部

Question

我正在使用 Bootstrap 4 网格来显示一些元素 - 我希望 vertically-top 对齐的标题和文本内容（它们是）。然后在每个网格元素的末尾有一个 <button>，我希望它在底部垂直对齐，与可能恰好在该行上的其他网格元素中的任何其他 <buttons> 水平（响应）。

我见过将所有内容都对齐到底部但不混合某些元素的示例。我试过 other similar posts

中的建议

这是我的 HTML:

<div class="row services">
    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 1</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 2</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 2</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 3</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
    </div>

    ...<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div> * several

</div>

任何帮助将不胜感激..

Answer 1

您可以将 <h2> 和 <p> 包装在每个网格元素的 <div> 中。
像这样，每个人都会有两个 children：<div> 和 <button>.

然后，您可以使用一些 Bootstrap 类的 flexbox 布局。

向每个网格元素添加 d-flex、flex-column justify-content-between。
这些类将添加 display: flex、flex-direction: column 和 justify-content: space-between。

<div class="row services">

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 1</h3>
      <p class="description collectiontext">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid explicabo tempora nostrum, minus distinctio suscipit in? Nemo unde dolor amet perspiciatis blanditiis deleniti, explicabo sed necessitatibus maiores quae culpa libero?</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 2</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 3</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 4</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div>

</div>

Bootstrap 网格元素 - 将大部分内容垂直对齐到顶部，但按钮垂直对齐到底部

Bootstrip grid elements - vertically align most content to top but button to bottom

html

css

bootstrap-4

responsive-design

bootstrap-grid