如何将表与bootstrap网格系统结合使用

Question

我的目标是显示4个表，它们将彼此靠近，而不是位于彼此之下像这样：

table 1 , table 2, table 3, table 4

我试着用引导程序的API所说的"行"来实现网格系统，但对于某些人来说，我的结果是这样显示的：

table1
table2
table3
table4

这是我的代码：（它只有2个表，但仍然是相同的坏结果）：

<div class="row">
  <div class="span4"> 
    <table class="table table-condensed table-bordered">
    <tr>
      <th>Hour</th>
      <th>Player 1</th>
      <th>Player 2</th>
    </tr>
    <tr ng-repeat="court in courts">
      <td>{{court.id}}</td>
      <td>{{court.hour}}</td>
      <td>{{court.date}}</td>
    </tr> 
  </div>
  <div class="span4">
    <table class="table table-condensed table-bordered">
    <tr>
      <th>Hour</th>
      <th>Player 1</th>
      <th>Player 2</th>
    </tr>
    <tr ng-repeat="court in courts">
      <td>{{court.id}}</td>
      <td>{{court.hour}}</td>
      <td>{{court.date}}</td>
    </tr>  
  </div>
</div>

请帮我…

Answer 1

以下是关于2个表的一般想法。。。

<!--// put it in a container //-->
<div class="container">
  <div class="row">
    <div class="span4">
      <table class="table table-condensed table-bordered">
        <tr>
          <th>Hour</th>
          <th>Player 1</th>
          <th>Player 2</th>
        </tr>
        <tr ng-repeat="court in courts">
          <td>{{court.id}}</td>
          <td>{{court.hour}}</td>
          <td>{{court.date}}</td>
        </tr>
        <!--// close your tables //-->
      </table>
    </div>
    <div class="span4">
      <table class="table table-condensed table-bordered">
        <tr>
          <th>Hour</th>
          <th>Player 1</th>
          <th>Player 2</th>
        </tr>
        <tr ng-repeat="court in courts">
          <td>{{court.id}}</td>
          <td>{{court.hour}}</td>
          <td>{{court.date}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

演示