Bootstrap行内Jumbotron等高对齐问题求助

Hey there! Let's get those two jumbotrons to match heights—this is a super common Bootstrap layout hiccup, and we’ve got a couple straightforward fixes to try.

Method 1: Use Bootstrap’s Built-in Flex Utility Classes #

Bootstrap’s row is already a flex container, so we can leverage flex utilities to make both columns and their jumbotrons fill the same height. Here’s how to modify your code:

<div class="row">
  {% if project.has_member_responses %}
    <div class="col-8 h-100">
      <div class="jumbotron greenback h-100 d-flex flex-column justify-content-center">
        <h4>Welcome to the Project test "{{ project.name }}" Detail page</h4>
      </div>
    </div>
    <div class="col-4 h-100">
      <div class="jumbotron greenback h-100 d-flex flex-column justify-content-center">
        <div class="inner-score">
          <h6>Team Score</h6>
          <h4>85</h4>
        </div>
      </div>
    </div>
  {% endif %}
</div>

What each class does: #

• h-100: Forces the column and jumbotron to take up 100% of the height of their parent container (the row, which will adjust to the tallest column’s content).
• d-flex flex-column: Turns the jumbotron into a flex container, making it easier to align content neatly.
• justify-content-center (optional): Vertically centers the content inside each jumbotron so it looks polished, instead of having content stuck to the top.

Method 2: Custom CSS (If You Prefer Less Utility Classes) #

If you’d rather avoid piling on utility classes, you can write a small custom CSS snippet to enforce equal heights:

/* Make columns fill the row's height */
.row .col-8, .row .col-4 {
  height: 100%;
}

/* Force jumbotrons to fill their column's height */
.row .jumbotron.greenback {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Optional vertical centering */
}

Why your original code didn’t work: #

Your columns were actually already the same height (thanks to Bootstrap’s flex row), but the jumbotrons inside only expanded to fit their own content. By setting the jumbotrons to height: 100% (and ensuring their parent columns also fill the row’s height), you force both jumbotrons to match the tallest one’s height.

A quick note: If your row’s parent container doesn’t have a defined height, you might need to add h-100 to that container too (e.g., if the row is inside a div that’s supposed to fill the viewport, add h-100 to that div).

Either of these methods should get your jumbotrons looking perfectly aligned. Let me know if you hit any issues!

内容的提问来源于stack exchange，提问作者Ben2pop