如何使用bootstrap3在表旁边放置按钮

Question

如何在div中的表格旁边设置按钮。

我的代码是：

 <div class="col-xs-6">  <!-- main div -->
  <div> <!-- table div -->
    <table class="table table-bordered table-striped text-center">
      <thead><tr>
           <!-- 4 Header -->
      </tr></thead>
      <tbody> <tr><td>
            <!-- first row -->
      </td></tr></tbody>
     </table>
    </div> 
  <div class="col-xs-4">
  <div class="col-xs-2" >
    <button type="button" class="btn btn-primary"  name="search" id="search">Search</button>   
  </div>
  <div class="col-xs-2" >
    <button type="button" class="btn btn-primary"  name="add" id="add">Add</button> 
  </div>   
</div>

-主div关闭

我得到的是：

Answer 1

将主要div放在课程上：col-xs-12

，然后将按钮div移至col-xs-8或col-xs-10。

因此，主要的总数为12，其中您将*-xs-2放在表格中，将*-xs-8按钮放在

尝试一下

     <!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row"> 
  <div class="col-xs-4"> 
    <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
  </div> 
  <div class="col-xs-8">
  <div class="row">

    <div class="col-xs-3" >
        <button type="button" class="btn btn-primary"  name="search" id="search">Search</button>   
    </div>
    <div class="col-xs-3" >
        <button type="button" class="btn btn-primary"  name="add" id="add">Add</button>  
    </div>

  </div>
   </div>
  </div>
  </div>

查看以下内容：https://jsfiddle.net/hbp71ejr/