Bootstrap 3.3.7小屏幕下如何让列高度自适应内容？

Hey there! Let's fix that column height issue you're having with Bootstrap 3.3.7. The core problem here is that on small/extra-small screens, your first and third columns might be inheriting styles that force them to match the tallest column in the row (a common side effect of either Bootstrap's default layout behavior or custom CSS you’ve added). Here’s how to make their height adapt to their content:

Step 1: Understand the Breakpoint #

Bootstrap 3’s md breakpoint kicks in at 992px. So we need to target screens smaller than 992px with a media query to override height styles.

Step 2: Add Custom CSS to Override Height #

Add this CSS to your stylesheet to force the first and third columns to shrink-wrap their content on small screens:

/* Target screens smaller than the md breakpoint */
@media (max-width: 991px) {
  /* Target your first and third columns */
  .col-md-2, .col-md-1 {
    height: auto !important; /* Override any fixed/100% height styles */
    min-height: auto !important; /* Clear any min-height constraints */
    margin-bottom: 15px; /* Optional: add spacing between stacked columns for better UX */
  }
}

Step 3: Fix Flex/Table Layout Conflicts (If Applicable) #

If you’ve modified the row to use display: flex or display: table (common for equal-height columns on large screens), you’ll need to reset that on small screens too:

@media (max-width: 991px) {
  .row {
    display: block; /* Switch back to block layout so columns stack freely */
  }
}

Full Working Example #

Here’s how your code might look with these fixes applied:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <style>
    /* Your existing custom styles (example) */
    .column-content {
      background: #f8f9fa;
      padding: 15px;
      border: 1px solid #dee2e6;
    }

    /* Small screen fixes */
    @media (max-width: 991px) {
      .col-md-2, .col-md-1 {
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 15px;
      }
      .row {
        display: block;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2 column-content">
        <p>Short content for first column</p>
      </div>
      <div class="col-md-9 column-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-md-1 column-content">
        <p>Small content for third column</p>
      </div>
    </div>
  </div>
</body>
</html>

Key Notes #

• The !important flag ensures your custom styles override any conflicting Bootstrap or existing custom CSS. If you can avoid it by making your selectors more specific, that’s even better—but it’s safe to use here for quick fixes.
• The optional margin-bottom adds space between stacked columns, making the mobile layout more readable.

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