css - 全宽下拉子导航 Bootstrap 3

Question

我正在尝试使用 Bootstrap 3 为移动设备创建一个带有下拉菜单和全宽子导航的页脚菜单。我已经使用一些 css 创建了下拉菜单并使子导航向左对齐(我不知道这是否是最好的方法，但它有效)我一直在尝试很多方法并检查了很多示例，但我无法弄清楚如何使子导航覆盖屏幕的整个宽度.这是我在这个 Bootply 中工作的示例 http://www.bootply.com/7wy0Oten9m

Answer 1

您的代码存在的问题是，无论您设置什么，所有 col-xs-2 类都会定义下拉菜单的宽度。这里的解决方案是暂时告别 Bootstrap。

想法:

1. 页脚 --> col-xs-12(全宽)

2. 将所有 5 个菜单项放入其中(均具有“button-footer-mobile”类)并将它们的宽度设置为 16.66667%(这是2列宽度)

3. 给中间菜单另一个类并将其设置为 33.33333%(4 列宽度)/在我的示例中类是 middlemenu/

4. 将“button-footer-mobile”类 float 到左侧并将其边距设置为 0。

这样您就可以拥有相同的布局，但下拉菜单现在可以具有 100% 的宽度。

你可以在这里看到一个工作的 bootply:http://www.bootply.com/lyLNGBDZ68#

希望对您有所帮助，我的回答清晰易懂，

安德鲁