Twitter引導標籤內的表格

我似乎無法讓我的表格顯示在Bootstrap標籤的內部，這裏是一個小提琴，我想我犯了一個小錯誤，任何人都如此善意指出它？ http://jsfiddle.net/NPpHm/ Twitter引導標籤內的表格

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

我曾嘗試使用規定的佈局，但我已經注意到如果我刪除的標籤似乎做工精細的表，使用jQuery-1.8.3和引導V2.2.2

來源

2013-01-14 Paul Ngumii

你不遵循tabbable內容Twitter的引導佈局。

，簡體中文，你的佈局是這樣的：

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

它應該是這樣的：

<div class="tab-content"> 
    <div class="tab-pane" id="1"/> 
    <div class="tab-pane" id="2"/> 
    <div class="tab-pane" id="3"/> 
</div>

See it here.

來源

2013-01-14 19:55:08 Alexander

非常感謝！ –

的問題是.tab-content和.tab-pane之間的div，這顯然破壞了Bootstrap jQuery。此外，ID不能以數字開頭。（更正：HTML5允許這樣做。）

http://jsfiddle.net/33Aby/

<div class="tab-content"> 
    <div class="tab-pane"> 
    ... 
    </div> 
</div>

來源

2013-01-14 19:48:14 isherwood

感謝同樣指着我在正確的方向也是，我不力瞭解如何使用ID號碼 –

Twitter引導標籤內的表格

回答

相關問題