Question

我想将并排的两个表放在同一个网格行中，但是在运行下面的代码时，表格会叠加：

<body>
...
<div class="container-fluid">
<div class="starter-template">

<div class='panel panel-primary'>
<div class='panel-heading'><h1>Main Title</h1></div>
<div class='panel-body'>

<div class='row-fluid'>
 <h4>Title</h4>
 <div class='span4'>
   <table class='table table-bordered'>
      <thead>
        <tr><th>feat1</th><th>feat2</th></tr></thead>
      <tbody>
      <tr><td>132</td><td>value a</td></tr>
      <tr><td>114</td><td>value b</td></tr>
      </tbody>
    </table>
  </div><!--closes table1-->

  <div class='span4'>
   <table class='table table-bordered'>
   <thead>
   <tr><th>feat1</th><th>feat3</th></tr>
      </thead>
      <tbody>
        <tr><td>264</td><td>val b</td></tr>
        <tr><td>3</td><td>val c</td></tr>
      </tbody>
    </table>
  </div><!--closes table2-->

</div>

</div><!--closes div panel-body-->
</div><!--closes div panel-->
</div> <!-- /.starter-template -->
</div><!-- /.container -->
...
</body>

结果是所有行中的一个表，然后是第一个下面的第二个表。

Answer 1

查看小提琴如果您仍希望在较小的屏幕上并排显示表格，请使用col-xs-6。如果要在较小屏幕上的不同行上显示表，请使用col-lg-6。 http://jsfiddle.net/DTcHh/1680/

<div class="row-fluid">
   <div class="col-xs-6">
      <div class="table-responsive">
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>One</th>
                  <th>One</th>
                  <th>One</th>
               </tr>
            <thead>
            <tbody>
               <tr>
                  <td>Two</td>
                  <td>Two</td>
                  <td>Two</td>
            </tbody>
         </table>
      </div>
   </div>
   <div class="col-xs-6">
      <div class="table-responsive">
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>One</th>
                  <th>One</th>
                  <th>One</th>
               </tr>
            <thead>
            <tbody>
               <tr>
                  <td>Two</td>
                  <td>Two</td>
                  <td>Two</td>
         </table>
      </div>
   </div>
</div>

如何在Bootstrap面板内的同一行中对齐两个表？

1 个答案: