twitter-bootstrap Twitter 引导标签内的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14325407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tables inside Twitter bootstrap tabs
提问by Paul Ngumii
I cant seem to get my tables displayed inside Bootstrap tab's, here is a fiddle I think I am making a small error anyone so kind as to point it out? http://jsfiddle.net/NPpHm/
我似乎无法在 Bootstrap 选项卡中显示我的表格，这是一个小提琴，我认为我犯了一个小错误，有人愿意指出吗？http://jsfiddle.net/NPpHm/
<ul class="nav nav-tabs" id="product-table">
<li><a href="#1" data-toggle="tab">Grade 1</a></li>
<li><a href="#2" data-toggle="tab">Grade 2</a></li>
<li><a href="#3" data-toggle="tab">Grade 3</a></li>
</ul>
<div class="tab-content">
<div>
<div class="tab-pane" id="1">
<table class="table table-condensed table-bordered table-striped volumes">
<thead>
<tr>
<th>Warehouse</th>
<th>Grain Volume</th>
<th>Trade Volume</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<tr>
<td>NFRA MPANDA RUKWA</td>
<td>487</td>
<td>487.00</td>
<td>IN</td>
</tr>
<tr>
<td>COTCORI Cooperative</td>
<td>113</td>
<td>113.00</td>
<td>IN</td>
</tr>
<tr>
<td>ENAS GBC KIREHE</td>
<td>131</td>
<td>131.00</td>
<td>IN</td>
</tr>
<tr>
<td>Government Procurement and Supply Agent</td>
<td>453</td>
<td>453.00</td>
<td>IN</td>
</tr>
<tr>
<td>Nairobi(test)</td>
<td>261</td>
<td>250.00</td>
<td>IN</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="tab-pane" id="2">
<table class="table table-condensed table-bordered table-striped volumes">
<thead>
<tr>
<th>Warehouse</th>
<th>Grain Volume</th>
<th>Trade Volume</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<tr>
<td>National Food Reserve Agency_Manyoni</td>
<td>172</td>
<td>172.00</td>
<td>IN</td>
</tr>
<tr>
<td>Sodea GBC</td>
<td>471</td>
<td>20.00</td>
<td>OUT</td>
</tr>
<tr>
<td>Kivu Maize Factory</td>
<td>389</td>
<td>389.00</td>
<td>IN</td>
</tr>
<tr>
<td>Mombasa Bulk Grain Handlers</td>
<td>200</td>
<td>200.00</td>
<td>IN</td>
</tr>
<tr>
<td>Zwii Enterprises-Muloza</td>
<td>-47</td>
<td>47.00</td>
<td>OUT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="tab-pane" id="3">
<table class="table table-condensed table-bordered table-striped volumes">
<thead>
<tr>
<th>Warehouse</th>
<th>Grain Volume</th>
<th>Trade Volume</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<tr>
<td>COTCORI Cooperative</td>
<td>93</td>
<td>93.00</td>
<td>IN</td>
</tr>
<tr>
<td>SOSOMA GBC KICUKIRO</td>
<td>-23</td>
<td>23.00</td>
<td>OUT</td>
</tr>
<tr>
<td>Shabiby_Indivisual</td>
<td>270</td>
<td>270.00</td>
<td>IN</td>
</tr>
<tr>
<td>Silayo_Union Service Stores</td>
<td>-38</td>
<td>38.00</td>
<td>OUT</td>
</tr>
<tr>
<td>SGR/NFRA VWAWA</td>
<td>-39</td>
<td>39.00</td>
<td>OUT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have tried to use the prescribed layout, however i have noticed If i remove the table the tabs seem to work fine, using jquery-1.8.3 and Bootstrap v2.2.2
我尝试使用规定的布局，但是我注意到如果我删除表格，选项卡似乎工作正常，使用 jquery-1.8.3 和 Bootstrap v2.2.2
回答by Alexander
You are not following the Twitter Bootstrap layout for tabbable content.
您没有遵循可选项卡内容的 Twitter Bootstrap 布局。
Simplified, your layout looks like this:
简化后，您的布局如下所示：
<div class="tab-content">
<div>
<div class="tab-pane" id="1"/>
</div>
<div>
<div class="tab-pane" id="2"/>
</div>
<div>
<div class="tab-pane" id="3"/>
</div>
</div>
And it should look like this:
它应该是这样的：
<div class="tab-content">
<div class="tab-pane" id="1"/>
<div class="tab-pane" id="2"/>
<div class="tab-pane" id="3"/>
</div>
回答by isherwood
The problem is the divs between .tab-content and .tab-pane, which apparently break the Bootstrap jQuery. Also, IDs cannot start with a number. (Correction: HTML5 allows this.)
问题是 .tab-content 和 .tab-pane 之间的 div，这显然破坏了 Bootstrap jQuery。此外，ID 不能以数字开头。（更正：HTML5 允许这样做。）
<div class="tab-content">
<div class="tab-pane">
...
</div>
</div>
