0

我的目标是显示 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>

请帮我...

4

1 回答 1

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>

演示

于 2013-08-06T18:50:05.393 回答