bootstrap 3 个对齐的按钮组在下拉按钮下方有一个微小的间隙，而在导航选项卡中

Question

我正在尝试在导航选项卡中设置一个合理的按钮组，以正确显示 Bootstrap 3.3.7。当按钮组位于导航选项卡之外时，一切看起来都很好。但是，只要我将按钮组放在导航选项卡中，Windows Chrome 上的 "Dropdown" 按钮下方就会有一个小间隙。这是一个示例代码，一旦我删除整个 "remove_me" 元素，差距就会消失。在使用 Windows Chrome 等任何浏览器时，是否有办法移除导航选项卡中 "Dropdown" 按钮下方的小间隙？或者它会在 "Dropdown" 按钮下方生成一个小间隙的代码有什么问题？提前致谢！

Sample code

Sample image

<div class="container">
    <div name="remove_me" class="row">
        <div class='col-md-7'>
            <ul id="tabs" class="nav nav-tabs">
                <li class='active'><a href="#main" role="tab" data-toggle="tab">main tab</a></li>
                <li><a href="#sub" role="tab" data-toggle="tab">sub tab</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="main">
            <div class="row">
                <div class="col-md-7">
                    <div class="btn-group btn-group-justified" role="group">
                        <a href="#" class="btn btn-primary" role="button">Left</a>
                        <a href="#" class="btn btn-primary" role="button">Middle</a>
                        <div class="btn-group" role="group">
                            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="btn-group btn-group-justified" role="group"><a href="#" class="btn btn-primary" role="button">extra button to show gap above this button</a></div>
                    There is a gap underneath the "Dropdown" button.
                </div>
            </div>
        </div>

        <div class="tab-pane" role="tabpanel" id="sub">sub tab content</div>
    </div>
</div>

Answer 1

这里是jsfiddle。试试这行 css.

.dropdown-menu{
 margin-top: 0;
}

bootstrap 3 个对齐的按钮组在下拉按钮下方有一个微小的间隙，而在导航选项卡中

bootstrap 3 justified button group has a tiny gap underneath drop-down button, while within navigation tabs

google-chrome

twitter-bootstrap-3

drop-down-menu

tabs

buttongroup