我尝试使用引导程序创建折叠的导航栏。但是，当我“打开”折叠的导航栏时，所有元素都没有放在适当的位置，而是堆叠在彼此的顶部。如下所示：
下面是我的代码导航栏：第一个
eyh26e7m1#
最简单的方法是将navbar-brand保留在默认位置（在navbar-header内），并通过媒体查询来解决它。这样，无论视口大小如何，它总是暴露的。工作示例：第一个
navbar-brand
navbar-header
c6ubokkw2#
试试这个：
.nav-item { display: block; }
0tdrvxhp3#
是css中的float lefts导致它们在移动的视图中不能堆叠，你可以只使用媒体查询将float应用到桌面大小屏幕上的列表项，但是bootstrap应该会为你解决所有问题。你有没有看过调整导航？这比你自己控制所有列表项的大小要容易得多。当你需要添加一个新的菜单项时会发生什么？这将成为一个维护噩梦。https://getbootstrap.com/components/#nav-justified
3条答案
按热度按时间eyh26e7m1#
最简单的方法是将
navbar-brand保留在默认位置（在navbar-header内），并通过媒体查询来解决它。这样，无论视口大小如何，它总是暴露的。工作示例：
第一个
c6ubokkw2#
试试这个：
0tdrvxhp3#
是css中的float lefts导致它们在移动的视图中不能堆叠，你可以只使用媒体查询将float应用到桌面大小屏幕上的列表项，但是bootstrap应该会为你解决所有问题。
你有没有看过调整导航？这比你自己控制所有列表项的大小要容易得多。当你需要添加一个新的菜单项时会发生什么？这将成为一个维护噩梦。
https://getbootstrap.com/components/#nav-justified