如何实现Bootstrap V3.3.5中3个响应式列文本框在sm/md/lg模式下等高？

Hey there! I’ve run into this exact scenario with Bootstrap 3.3.5 before—getting those three columns to match heights on sm/md/lg breakpoints (while keeping xs stacked as is) is totally doable. Let’s walk through the best approaches:

Bootstrap 3 doesn’t include flexbox by default, but we can add a small custom CSS snippet to enable it for larger breakpoints. This will make columns automatically match heights, and we’ll set the textareas to fill the full height of their columns.

CSS 代码 #

/* Enable flex layout for sm and larger screens */
@media (min-width: 768px) {
  .flex-row {
    display: flex;
  }
  .flex-row .col-sm-4 {
    flex: 1; /* Ensure columns share width equally */
  }
  /* Make textareas fill the full column height */
  .flex-row .form-control {
    height: 100%;
    box-sizing: border-box; /* Prevent padding from increasing total height */
  }
}

HTML 结构 #

<div class="container">
  <div class="row flex-row">
    <div class="col-xs-12 col-sm-4">
      <textarea class="form-control" placeholder="输入文本..."></textarea>
    </div>
    <div class="col-xs-12 col-sm-4">
      <textarea class="form-control" placeholder="输入更长的文本，测试高度匹配..."></textarea>
    </div>
    <div class="col-xs-12 col-sm-4">
      <textarea class="form-control" placeholder="输入更多内容，看看高度是否同步..."></textarea>
    </div>
  </div>
</div>

This works because flexbox forces all direct children of the .flex-row to have equal height. Setting the textarea to height: 100% makes it inherit that full height.

If you need to support older browsers like IE9 that don’t handle flexbox well, a JavaScript solution will dynamically calculate the tallest textarea and set all others to match its height. It also updates when the window resizes or users type new content.

JavaScript 代码（依赖jQuery） #

// Function to sync textarea heights
function syncTextareaHeights() {
  const breakpoint = 768; // Bootstrap sm breakpoint
  if ($(window).width() >= breakpoint) {
    let maxHeight = 0;
    // Reset heights first to avoid stale calculations
    $('.equal-height-col .form-control').height('auto');
    // Find the tallest textarea
    $('.equal-height-col .form-control').each(function() {
      const currentHeight = $(this).outerHeight();
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    // Set all textareas to the tallest height
    $('.equal-height-col .form-control').height(maxHeight);
  } else {
    // Reset to auto height for xs screens
    $('.equal-height-col .form-control').height('auto');
  }
}

// Run on page load, window resize, and text input
$(document).ready(function() {
  syncTextareaHeights();
  $(window).resize(syncTextareaHeights);
  $('.form-control').on('input', syncTextareaHeights);
});

HTML 结构 #

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 equal-height-col">
      <textarea class="form-control" placeholder="输入文本..."></textarea>
    </div>
    <div class="col-xs-12 col-sm-4 equal-height-col">
      <textarea class="form-control" placeholder="输入更长的文本，测试高度匹配..."></textarea>
    </div>
    <div class="col-xs-12 col-sm-4 equal-height-col">
      <textarea class="form-control" placeholder="输入更多内容，看看高度是否同步..."></textarea>
    </div>
  </div>
</div>

You can also mimic table layout behavior to get equal-height columns. This works in older browsers but can interfere with some Bootstrap default styles, so use it cautiously.

CSS 代码 #

@media (min-width: 768px) {
  .table-row {
    display: table;
    width: 100%;
    table-layout: fixed; /* Ensure equal column widths */
  }
  .table-row .col-sm-4 {
    display: table-cell;
    float: none; /* Override Bootstrap's default float */
    vertical-align: top;
  }
  .table-row .form-control {
    height: 100%;
    box-sizing: border-box;
  }
}

HTML 结构 #

<div class="container">
  <div class="row table-row">
    <div class="col-xs-12 col-sm-4">
      <textarea class="form-control" placeholder="输入文本..."></textarea>
    </div>
    <div class="col-xs-12 col-sm-4">
      <textarea class="form-control" placeholder="输入更长的文本，测试高度匹配..."></textarea>
    </div>
    <div class="col-xs-12 col-sm-4">
      <textarea class="form-control" placeholder="输入更多内容，看看高度是否同步..."></textarea>
    </div>
  </div>
</div>

总结 #

Personally, I’d recommend the flexbox method first—it’s clean, requires minimal code, and works seamlessly on all modern browsers. If you need to support legacy browsers, the JavaScript approach is reliable and handles dynamic content changes as users type.

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