html - 引导列内的等高 div

Question

我有一组三列。每列内有以下内容:

1. 一个小的圆形 div，其中包含一个很棒的字体图标。
2. 一个小标题标签
3. 另一个 div，其中包含一些文本和一个按钮。

我一直无法让第三个元素彼此等高。我还需要按钮也处于相同的高度。我了解如何使 div 具有相同的高度(显示 here !)

但是，我无法让这些 div 具有相同的高度，并且按钮位于相同的位置。这是 HTML 代码:

<div class="container-fluid">
<div class="row justify-content-center h-100">
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
    </div>
    <h1 class="about-us-text">Hackers</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        The early registration deadline is October 15th and regular registration closes November 3rd.
        For more information check out the FAQ!
      </div>
      <button class="about-us-button" type="button"><h2>Register</h2></button>
    </div>
  </div>
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
    </div>
    <h1 class="about-us-text">Mentors</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        Interested in volunteering to help our hackers the day of the event?
        Sign up here to be a mentor for Codestellation.
      </div>
      <button class="about-us-button" type="button"><h2>Sign Up</h2></button>
    </div>
  </div>
  <div class="col-3">
    <div class="circleAboutUs">
      <i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
    </div>
    <h1 class="about-us-text">Sponsors</h1>
    <div class="about-us-content-container">
      <div class="about-us-content-text">
        Codestellation can&#8217t take off without our sponsors!
        Learn more about what perks you&#8217ll recieve and how your partnership will contribute to the event.
      </div>
      <button class="about-us-button" type="button"><h2>Sponsor</h2></button>
    </div>
  </div>
</div>

这是 CSS:

.circleAboutUs {
     border: 3px solid #FAA880;
     margin: 0 auto;
     border-radius: 100%;
     height: 140px;
     width: 140px;
     background-color: #FAA880;
 }

.about-us-content-container {
    margin: auto;
    border-radius: 10%;
    background-color: #FAA880;
    text-align: center;
    margin-bottom: 60px;
}

.about-us-content-text {
    font-family: 'Mina', 'Montserrat', monospace;
    padding: 25px 25px;
    font-size: 2em;
}

.about-us-text {
    text-align: center;
    color: #3A318C;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-us-button {
    border-radius: 20%/50%;
    border: 1px solid black;
    text-align: center;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    color: #3A318C;
    margin-bottom: 10px;
    padding-top:10px;
}

.about-us-button:hover {
   cursor: pointer;
    background-color: white;
}

.col-sm > .about-us-content-container {
    height: 55px;
}

目前看起来是这样的:Example

我希望它保持响应能力，这样标题和 div 在移动设备上仍然可以很好地堆叠。

Answer 1

这种行为可以通过使用 flex box 轻松实现。

• 首先，我们为 bootstrap 中所有列的每个子级创建 div 包装器。
• 我们将这些子项的高度设置为 100% 以使它们填满整个容器。
• 然后，我们设置 flex-grow: 1，这样 about-us-content-container 将填满整个容器，包括备用空间。
• 但是现在 about-us-content-container 将有一个 auto 边距，这可以防止它填满整个容器。因此，我们必须将边距设置为 0。
• about-us-content-container 现在填满了所有空间。但是按钮仍然不在底部。我们可以通过做同样的事情得到这个
  • 将显示设置为 flex。
  • 将 about-us-content-text 的 flex-grow 设置为 1。
  • 按钮现在填满了 about-us-content-container 的整个宽度。为避免这种情况，将 div 包裹在按钮周围。

这是 Codepen 中的解决方案:https://codepen.io/anhanhvina/pen/WKmoWQ

下面是有效的代码。您现在可以添加更多类以使其响应。

.col-3 > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.about-us-content-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

.about-us-content-text {
  flex-grow: 1;
}


.circleAboutUs {
     border: 3px solid #FAA880;
     margin: 0 auto;
     border-radius: 100%;
     height: 140px;
     width: 140px;
     background-color: #FAA880;
 }

.about-us-content-container {
    margin: auto;
    border-radius: 10%;
    background-color: #FAA880;
    text-align: center;
    margin-bottom: 60px;
}

.about-us-content-text {
    font-family: 'Mina', 'Montserrat', monospace;
    padding: 25px 25px;
    font-size: 2em;
}

.about-us-text {
    text-align: center;
    color: #3A318C;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-us-button {
    border-radius: 20%/50%;
    border: 1px solid black;
    text-align: center;
    font-family: 'Mina', 'Montserrat', monospace;
    font-weight: bold;
    color: #3A318C;
    margin-bottom: 10px;
    padding-top:10px;
}

.about-us-button:hover {
   cursor: pointer;
    background-color: white;
}

.col-sm > .about-us-content-container {
    height: 55px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row justify-content-center h-100">
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
        </div>
        <h1 class="about-us-text">Hackers</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            The early registration deadline is October 15th and regular registration closes November 3rd. For more information check
            out the FAQ!
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Register</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
        </div>
        <h1 class="about-us-text">Mentors</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            Interested in volunteering to help our hackers the day of the event? Sign up here to be a mentor for Codestellation.
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Sign Up</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div>
        <div class="circleAboutUs">
          <i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
        </div>
        <h1 class="about-us-text">Sponsors</h1>
        <div class="about-us-content-container">
          <div class="about-us-content-text">
            Codestellation can&#8217t take off without our sponsors! Learn more about what perks you&#8217ll recieve and how your partnership
            will contribute to the event.
          </div>
          <div>
            <button class="about-us-button" type="button">
              <h2>Sponsor</h2>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>