Высота строки таблицы 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>​

html css twitter-bootstrap
person ale    schedule 05.07.2012    source источник
comment
Класс .btn-toolbar имеет поля сверху и снизу 9px. удалите это, и это будет работать. Демонстрация скрипта: jsfiddle.net/surendraVsingh/uEMtf/1   -  person SVS    schedule 05.07.2012
comment
@VCS, вероятно, было бы лучше просто удалить класс btn-toolbar из элемента, а не переопределять его. Кроме того, это должен быть ответ, а не комментарий;)   -  person My Head Hurts    schedule 05.07.2012
comment
@MyHeadHurts ха-ха-ха... это SVS... это должен быть ответ, если он поможет человеку, задавшему вопрос.   -  person SVS    schedule 05.07.2012
comment
@SVS, ха, извините, у меня дислексическое утро! Думаю, я пойду возьму еще кофе   -  person My Head Hurts    schedule 05.07.2012

Ответы (1)


arrow_upward
1
arrow_downward

Удалите класс класса .btn-toolbar или определите верхнее и нижнее нулевое поле где-нибудь в вашем коде CSS ниже класса .btn-toolbar

Рабочая скрипка: http://jsfiddle.net/surendraVsingh/uEMtf/1/

person SVS    schedule 05.07.2012