Question

我正在尝试使horizontal dropdown菜单占据整个身体的宽度。 dropdown-menu应该从左边的小提琴开始。

Sub List 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类设置样式。试试我的演示。

Answer 2

执行此操作的一种方法是将style="margin-left: 200px" CSS声明移至dropdown-toggle锚点项，而不是btn-group。这样，当触发器被推到右侧时，您的容器以及您的下拉菜单将保持与您的徽标对齐。

下拉菜单采取整个身体宽度 - 自举

2 个答案: