如何使用Bootstrap将label、select和button元素置于同一行？

Hey there! Let me walk you through a couple of solid ways to get your label, dropdown select, and button lined up horizontally using Bootstrap—no messy custom CSS needed.

Option 1: Flexbox (Quick & Compact) #

This is my go-to for tight, inline layouts. Bootstrap's flex utility classes make this super easy:

<div class="d-flex align-items-center gap-3">
  <label for="categorySelect" class="mb-0">Pick a Category:</label>
  <select id="categorySelect" class="form-select">
    <option>Books</option>
    <option>Electronics</option>
    <option>Clothing</option>
  </select>
  <button type="button" class="btn btn-primary">Filter</button>
</div>

Let me break down what's happening here:

• d-flex turns the container into a flexbox, making all child elements sit side-by-side
• align-items-center ensures everything is vertically centered (no wonky misalignment between the label and the other elements)
• gap-3 adds consistent spacing between each element (Bootstrap 5+ only—super clean!)
• mb-0 removes the default bottom margin on the label, so there's no extra vertical space

If you're still using Bootstrap 4, swap gap-3 with margin classes like mr-2 (margin-right) on the label and select:

<div class="d-flex align-items-center">
  <label for="categorySelect" class="mb-0 mr-2">Pick a Category:</label>
  <select id="categorySelect" class="form-control mr-2">
    <option>Books</option>
    <option>Electronics</option>
    <option>Clothing</option>
  </select>
  <button type="button" class="btn btn-primary">Filter</button>
</div>

Option 2: Responsive Row & Columns #

If you want the elements to automatically stack on smaller screens (like mobile), use Bootstrap's grid system instead:

<div class="row align-items-center">
  <div class="col-auto">
    <label for="categorySelect" class="mb-0">Pick a Category:</label>
  </div>
  <div class="col-auto">
    <select id="categorySelect" class="form-select">
      <option>Books</option>
      <option>Electronics</option>
      <option>Clothing</option>
    </select>
  </div>
  <div class="col-auto">
    <button type="button" class="btn btn-primary">Filter</button>
  </div>
</div>

• row sets up the grid container
• col-auto makes each column only take as much width as its content (no wasted space)
• align-items-center again keeps everything vertically aligned
• Best part: On narrow screens, these elements will stack neatly on top of each other without any extra work

Quick Pro Tips #

• Always use the for attribute on the label that matches the select's id—this is good accessibility practice, and it lets users click the label to focus the select
• For Bootstrap 5, use form-select for the dropdown; for Bootstrap 4, it's form-control
• If you need to prevent flex items from wrapping on small screens, add flex-nowrap to the flex container (but the row/col method is better for responsiveness)

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