时间戳

首页 > 解决方案 > Bootstrip 网格元素 - 将大多数内容垂直对齐到顶部，但将按钮对齐到底部

html - Bootstrip 网格元素 - 将大多数内容垂直对齐到顶部，但将按钮对齐到底部

问题描述

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

我见过将所有内容对齐到底部但不混合某些元素的示例。我已经尝试过其他类似帖子中的建议

这是我的 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>

任何帮助，将不胜感激..

标签： htmlcssbootstrap-4responsive-designbootstrap-grid

解决方案

您可以将每个网格元素的 a包裹<h2>起来。 像这样，您将有两个孩子：和.<p><div>
<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>

推荐阅读