2012-07-05 89 views
1

我有一個Bootstrap表格,當我使用按鈕下拉列時行太高。有一些CSS可以用來阻止這種情況發生嗎?Bootstrap CSS表格行高度與下拉按鈕太大

我注意到Bootstrap的普通按鈕表並不是100%完美:http://twitter.github.com/bootstrap/base-css.html#tables但它們比我的下拉按鈕更好。

這裏有一個小提琴:http://jsfiddle.net/uEMtf/

這裏的HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test Page</title> 
</head> 
<body> 
<table class="table table-bordered table-striped"> 
    <tbody> 
     <tr><td>some stuff</td><td>some more stuff</td></tr> 
     <tr> 
      <td>here's something</td> 
      <td><div class="btn-toolbar"><div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"></span></button> 
         <ul class="dropdown-menu"> <li><a href="del"> Action 1</a></li> 
          <li><a href="details"> Action 2</a></li> 
          <li><a href="edit"> Action 2</a></li></ul></div></div> 
         </ul> 
        </div> 
       </div> 
      </td> 
     </tr> 
    <tr> 
      <td>here's something</td> 
      <td><button class="btn" href="#">Default</button></td> 
        </tr> 
     <tr> 
      <td>another row</td> 
      <td>with more stuff</td> 
     </tr> 
    </tbody> 
</table> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="bootstrap.js"></script> 
</body> 
</html>​ 
+1

.btn-toolbar class ha s margin-top&margin-bottom 9px。刪除它,它會工作。 小提琴演示:http://jsfiddle.net/surendraVsingh/uEMtf/1/ – SVS 2012-07-05 08:49:02

+0

@VCS它可能會更好只是從元素刪除'btn-toolbar'類而不是重寫它。除此之外,這應該是一個答案,而不是一個評論;) – 2012-07-05 08:58:25

+0

@MyHeadHurts哈哈哈...它的SVS..ya它應該是一個答案,如果它可以幫助提問的人。 – SVS 2012-07-05 09:03:36

回答