Bootstrap row-eq-height使用异常：求助实现列/行等高布局

Hey there! Let's troubleshoot why Bootstrap's row-eq-height class isn't delivering the equal-height layout you're after. Based on your code context, here are actionable fixes to get things working right:

• Fix your Bootstrap structure first
  The row-eq-height class is meant to pair with Bootstrap's base .row class—using it alone won't trigger the equal-height behavior. Your markup should follow this structure:

  <div class="row row-eq-height">
    <div class="col-md-6">
      <!-- Your first column content -->
    </div>
    <div class="col-md-6">
      <!-- Your second (taller) column content -->
    </div>
  </div>
  

  From your snippet, it looks like row-eq-height is being used without wrapping it in a .row—adding that base class is often the quick fix here.

• Check your Bootstrap version
  Heads up: row-eq-height is a Bootstrap 3 feature that uses CSS table layouts. If you're on Bootstrap 4 or 5, this class doesn't exist anymore—those versions use Flexbox by default, so standard .row containers will already make columns equal height. If you're stuck on Bootstrap 3, make sure no custom CSS is overriding the display: table-row property that row-eq-height applies.

• Switch to Flexbox for more reliability
  If the Bootstrap class still isn't working, skip it and use native Flexbox—it's more consistent and widely supported now. Add a custom class to your container:

  .equal-height-flex {
    display: flex;
    flex-wrap: wrap; /* Keeps columns responsive on smaller screens */
  }
  

  Then apply it to your row:

  <div class="row equal-height-flex">
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
  </div>
  

  Flexbox will automatically make all columns in the row match the tallest one, no extra hacks needed.

• Hunt for conflicting CSS
  Sometimes custom styles or third-party plugins can overwrite row-eq-height's styles. Use your browser's dev tools (right-click → Inspect) to check the computed styles of your row. If display is set to block instead of table-row, you'll need to find the conflicting CSS rule and adjust it (maybe add !important temporarily to test, or refactor your styles to be more specific).

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