5

テーブルが 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>

所定のレイアウトを使用しようとしましたが、jquery-1.8.3 と Bootstrap v2.2.2 を使用して、テーブルを削除するとタブが正常に動作するように見えることに気付きました

4

2 に答える 2

8

タブ可能なコンテンツの Twitter Bootstrap レイアウトに従っていません。

簡略化すると、レイアウトは次のようになります。

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

こちらをご覧ください。

于 2013-01-14T19:55:08.050 に答える
3

問題は、.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-14T19:48:14.053 に答える