Bootstrap：响应式导航菜单

Question

在我的页面中，我有一个导航栏菜单。我重新调整页面大小，但菜单显示不正确。按钮，原始图像和图像不是垂直设置的，在某种尺寸下它们不是水平线。

这是我的代码：JSFIDDLE

我如何解决我的问题？

Answer 1

这种情况正在发生，因为您的导航标题尚未设置width

.navbar-header {
    width:100%;
}

现在应该没事了！
demo

修改

从col-xs-4 col-sm-4 col-md-4 col-lg-4 still looks fine

中删除<div class="navbar-header">后

Answer 2

宽度col navbar-header＆gt;从col-xs-4到col-xs-12。检查网格系统中的其他宽度设置

div class="navbar-header col-xs-12 col-sm-4 col-md-4 col-lg-4"

使用左浮动位置A元素

.nav-menu .navbar-header a{
   float: left;
}

左侧浮动的位置菜单切换

.navbar-toggle {
   float: left;   
}