如何使用Bootstrap3在div内将按钮与表格并排显示？

Hey there! Let's get those buttons sitting neatly next to your table in Bootstrap 3—your current code has a couple of small layout missteps that are throwing off the alignment. Let's break down the problem and fix it step by step.

What's Wrong With Your Current Code? #

Your main container is a col-xs-6, but you're placing another col-xs-4 directly inside it without wrapping everything in a row first. Bootstrap's grid system relies on a strict row → col-*-* nesting structure—without the row, the columns won't calculate their widths correctly, and your buttons end up misaligned or cramped.

Solution 1: Proper Grid Nesting for Side-by-Side Table & Buttons #

The fix is simple: wrap your table and button group in a row, then assign column classes to each so they share the same horizontal space (remember, Bootstrap uses 12 total columns per row). Here's the corrected code:

<!-- Main container (use container-fluid for full-width, or container for fixed-width) -->
<div class="container-fluid">
  <!-- Row to hold table and buttons -->
  <div class="row">
    <!-- Table takes up 8 of 12 columns -->
    <div class="col-xs-8">
      <table class="table table-bordered table-striped text-center">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>First Row Data</td>
            <td>First Row Data</td>
            <td>First Row Data</td>
            <td>First Row Data</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Buttons take up remaining 4 columns -->
    <div class="col-xs-4">
      <!-- Inner row to space buttons properly -->
      <div class="row">
        <div class="col-xs-6">
          <button type="button" class="btn btn-primary btn-block" name="search" id="search">Search</button>
        </div>
        <div class="col-xs-6">
          <button type="button" class="btn btn-primary btn-block" name="add" id="add">Add</button>
        </div>
      </div>
    </div>
  </div>
</div>

Key Adjustments Explained: #

• row Wrapper: The outer row ensures Bootstrap correctly calculates column widths and gutters (the spacing between columns).
• Column Sizing: col-xs-8 for the table and col-xs-4 for buttons add up to 12, which fits Bootstrap's grid system. Adjust these numbers (e.g., col-xs-9 and col-xs-3) if you need more/less space for either element.
• Button Layout: The inner row and col-xs-6 classes split the button container into two equal parts, and btn-block makes each button fill its column (remove btn-block if you want smaller buttons).

Solution 2: Buttons & Table Inside a Custom Div Container #

If you need to keep everything inside a specific div (not the full Bootstrap container), just add a row inside that custom div to handle the layout:

<!-- Your custom div container -->
<div class="col-xs-6" style="border: 1px solid #ccc; padding: 10px;">
  <div class="row">
    <!-- Table column -->
    <div class="col-xs-7">
      <table class="table table-bordered table-striped text-center">
        <!-- Table content here -->
      </table>
    </div>

    <!-- Buttons column -->
    <div class="col-xs-5">
      <div class="row">
        <div class="col-xs-6">
          <button type="button" class="btn btn-primary" name="search" id="search">Search</button>
        </div>
        <div class="col-xs-6">
          <button type="button" class="btn btn-primary" name="add" id="add">Add</button>
        </div>
      </div>
    </div>
  </div>
</div>

This way, even inside a smaller container, the table and buttons will stay side-by-side as intended.

Just remember: always nest col-*-* classes inside a row to avoid layout glitches in Bootstrap 3. That's the golden rule!

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