Bootstrap CSS表格行高，下拉按钮太大答案

【问题标题】：Bootstrap CSS table row height with dropdown button too largeBootstrap CSS表格行高，下拉按钮太大
【发布时间】：2012-07-05 17:31:41
【问题描述】：

我有一个 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>

【问题讨论】：

.btn-toolbar 类的 margin-top & margin-bottom 9px。删除它&它会工作。小提琴演示：jsfiddle.net/surendraVsingh/uEMtf/1
@VCS 最好从元素中删除 btn-toolbar 类而不是覆盖它。除此之外，这应该是一个答案而不是评论；）
@MyHeadHurts 哈哈哈......它的 SVS..ya 如果它可以帮助提出问题的人，它应该是一个答案。
@SVS 哈哈，抱歉——早上有阅读障碍！我想我再去喝杯咖啡

标签： html css twitter-bootstrap

【解决方案1】：

删除 .btn-toolbar 类或在 .btn-toolbar 类下方的 css 代码中的某处定义边距顶部和底部零

工作小提琴：http://jsfiddle.net/surendraVsingh/uEMtf/1/

【讨论】：