如何在引导网格系统中使用表

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>

Demo