Twitter Bootstrap 3摺疊行不能正常工作

我正在嘗試製作一個表，其中包含的行可能會在按下按鈕時展開和摺疊，例如在Windows資源管理器中按下文件夾旁邊的「加號」將打開目錄中的文件。Twitter Bootstrap 3摺疊行不能正常工作

這是我寫的：

<!DOCTYPE html> 
     <html> 
     <head lang="en"> 
      <meta charset="UTF-8"> 
      <title></title> 

      <link rel="stylesheet" href="../asset/css/bootstrap.min.css"  type="text/css" /> 
      <link rel="stylesheet" href="../asset/css/trax.css" type="text/css" /> 
     </head> 

     <body> 

      <div class="container"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Test Results</h3> 
        </div> 
        <div class="table-responsive"> 
         <table class="table table-condensed table-hover"> 
          <thead> 
          <tr> 
           <th class="col-md-7 text-left">Name</th> 
           <th class="col-md-1 text-right">Success</th> 
           <th class="col-md-1 text-right">Total</th> 
           <th class="col-md-1 text-right">Fail</th> 
           <th class="col-md-2 text-center">Trend</th> 
          </tr> 
          </thead> 
          <tbody> 

          <tr> 
           <td class="text-left"> 
            <button type="button" class="btn btn-default btn-  xs" data-toggle="collapse" data-target=".module,.first"> 
             + 
            </button> 
            Foo 
           </td> 
           <td class="text-right up"><span class="glyphicon glyphicon-arrow-up"></span>80%</td> 
           <td class="text-right">5</td> 
           <td class="text-right">1</td> 
           <td class="text-center"><span class="inlinesparkline" values="1,2,8,4,5,7,10"></span></td> 
          </tr> 

          <tr class="collapse out module first"> 
           <td class="text-left col-md-7">Hi</td> 
           <td class="text-right up col-md-1"><span class="glyphicon glyphicon-arrow-up"></span>95%</td> 
           <td class="text-right col-md-1">5</td> 
           <td class="text-right col-md-1">1</td> 
           <td class="text-center col-md-2"><span class="inlinesparkline" values="1,2,3,4,5"></span></td> 
          </tr> 

          <tr> 
           <td class="text-left">Bar</td> 
           <td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td> 
           <td class="text-right">5</td> 
           <td class="text-right">2</td> 
           <td class="text-center"><span class="inlinesparkline" values="10,5,7,12,6,4,2"></span></td> 
          </tr> 

          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 

      <script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript">  </script> 
      <script src="../asset/js/bootstrap.min.js" type="text/javascript"></script> 
      <script src="../asset/js/jquery.sparkline.js" type="text/javascript">  </script> 
      <script src="../asset/js/app.js" type="text/javascript"></script> 
     </body> 
    </html>

所以，我設法按鈕顯示新行，但它不能正常安排：根據表頭細胞表細胞不安排像其他行一樣。但是，當按下按鈕時，在轉換過程中，它會自行排列，然後再調整到錯誤的間距。

將col-md-(number)添加到單元格中，因爲類沒有修復它。

請告訴我如何解決它/我要去哪裏錯了。

來源

2014-06-16 Kartik Raj Kanna

這是一個有趣的。 I found a similar question with an answer似乎工作。我創建了一個顯示它正在工作的jsFiddle。基本上它包括添加你自己的CSS類來覆蓋引導CSS並強制它顯示爲一個表格行。

table .collapse.in { 
    display: table-row !important; 
}

我不能說我特別喜歡的解決方案，特別是用!important，但它的作品。有一個問題的解決方案，我鏈接你涉及到<div>加入<tr>與一類可摺疊但我不喜歡的聲音甚至更多。

來源

2014-06-16 14:28:45

它可以在您創建的jsFiddle中工作，但不會在我將其複製並放置爲HTML頁面並在瀏覽器（Chrome和Firefox）上運行時使用。我複製並粘貼了你的確切代碼 –

你能準確地發佈你放在哪裏，或許在你的問題中作爲編輯。否則我所能建議的就是在Firebug或其他開發工具中檢查它，看看這個類是否被實際使用或者是否被其他東西覆蓋 –

爲什麼'col-md-1'不能用於'th' ？ – vipin8169

Twitter Bootstrap 3摺疊行不能正常工作

回答

相關問題