Bootstrap3.3.7中如何避免宽度<769px时选择表单换行？

Hey there! Let's tackle that form wrapping issue you're seeing. Bootstrap 3's default .form-inline class automatically stacks elements vertically when the viewport drops below 768px, but we can override this behavior with a couple of straightforward solutions.

Option 1: Add Horizontal Scrolling for Small Screens (Most User-Friendly) #

This approach keeps all form elements in a single row on small screens, adding a horizontal scrollbar if needed to avoid content overflow without cramming elements too tightly.

First, update your HTML to add a custom class to the form:

<div class="container">
  <div class="row">
    <form class="form-inline no-wrap-form">
      <div class="form-group">
        <label for="select_year">Year</label>
        <select class="form-control" id="select_year" style="width: 96px"></select>
      </div>
      <div class="form-group">
        <label for="select_month">Month</label>
        <select class="form-control" id="select_month" style="width: 96px"></select>
      </div>
      <div class="form-group">
        <label for="select_day">Day</label>
        <select class="form-control" id="select_day" style="width: 96px"></select>
      </div>
    </form>
  </div>
</div>

Then add this custom CSS to your stylesheet:

/* Prevent wrapping on screens <769px */
@media (max-width: 768px) {
  .no-wrap-form {
    white-space: nowrap; /* Force elements to stay in one line */
    overflow-x: auto; /* Add horizontal scroll if content exceeds viewport */
    padding-bottom: 10px; /* Give space for the scrollbar so it doesn't cover content */
  }

  .no-wrap-form .form-group {
    display: inline-block; /* Keep groups inline instead of block-level */
    margin-bottom: 0; /* Remove default bottom margin meant for stacked groups */
    vertical-align: middle; /* Align labels and selects neatly */
  }
}

Option 2: Force Inline Layout on All Screen Sizes #

If you prefer no scrolling and want elements to stay inline even on very small screens (note: this might make elements feel cramped on tiny mobile devices), use this CSS override:

/* Override Bootstrap's default stacking behavior for small screens */
@media (max-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

Quick Tips: #

• Your existing width: 96px on the selects is ideal here—it keeps each element a consistent size, which helps prevent unexpected wrapping.
• Make sure your custom CSS loads after the Bootstrap 3 CSS file, so it properly overrides the default framework styles.

内容的提问来源于stack exchange，提问作者David Foie Gras