html - 下拉菜单采用整个 body 宽度 - bootstrap

Question

我正在尝试使水平下拉菜单 菜单占据主体的整个宽度。 dropdown-menu 应该在下面的 fiddle 中从左边开始。

FIDDLE HERE

子列表 1 应该从 Logo+Text 区域开始，应该一直流到 li 继续。

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                <span>Logo+Text</span>
            </div>
            <div class="btn-group" style="margin-left: 200px">
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Sub List 1</a>
                    </li>
                    <li>
                        <a href="#">Sub List 2</a>
                    </li>
                    <li>
                        <a href="#">Sub List 3</a>
                    </li>
                    <li>
                        <a href="#">Sub List 4</a>
                    </li>
                    <li>
                        <a href="#">Sub List 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

只需使用position: initial;到父类btn-group。如果不起作用，则使用 !important。

在 JSFIDDLE 上查看我的演示

好的做法是:添加一个新类 has_dropdown 到 btn-group。然后通过 has_dropdown 类设置样式。试试我的演示。