如何对齐引导面板中同一行中的两个表？

我希望把并排侧相同的网格行的两个表，但表只是堆在运行时代码如下：如何对齐引导面板中同一行中的两个表？

<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>

结果是所有行的一个表，然后第二一个低于第一个。

来源

2014-11-06 alemol

我找到了答案在这里：http://stackoverflow.com/questions/23977404/two-side-by-side-tables-in-bootstrap请勿使用 '跨度*'，但“COL-XS -6' – alemol 2014-11-06 18:16:27

检出小提琴如果您仍想在较小的屏幕上并排显示表格，请使用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>

来源

2014-11-06 18:59:57 Aaron

如何对齐引导面板中同一行中的两个表？

回答

相关问题