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

Question

我使用一个引导4网格显示一些元素-标题和文本内容，我希望垂直-顶部对齐(它们是)。然后，在每个网格元素的末尾有一个<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>中。

像这样，每个孩子都有两个：<div>和<button>。

然后，您可以使用一些引导类作为柔性盒布局。

向每个网格元素添加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>