Css 具有引导功能的响应导航栏3

当在移动设备上观看时，我希望我的导航栏不会崩溃，而是像原来的桌面网站一样。我通过在媒体屏幕中覆盖CSS实现了这一点（下面的代码）。然而，我希望导航栏能够延伸到整个宽度，而这是我无法实现的

我试着将导航栏默认的背景色改为黑色，但它增加了一些我似乎无法删除的边距

@媒体屏幕
和（最小宽度：320px）
和（最大宽度：767px）
和（方向：景观）{
身体{
保证金：0自动；
背景图像：url（../images/background_vm.jpg）；
/*背景重复：无重复*/
背景附件：固定；
背景尺寸：100%自动；
字体系列：“Tinos”、“Times New Roman”；
字体大小：22px；
边际上限：0px；
}
.头bg{
宽度：100%；
高度：50px；
背景：url（../images/nadpis2_bg.jpg）；
背景大小：100%100%；
背景附件：固定；
}
.旗帜{
利润上限：-25px；
右边填充：35px；
}
.img{
宽度：35%；
}
.集装箱{
最大宽度：760像素；
}
.内容{
填充：15px；
}
.身高{
高度：50px；
背景色：透明；
}
/*始终浮动导航栏标题*/
.导航栏标题{
浮动：左；
}
/*撤消折叠的导航栏*/
.导航栏倒塌{
显示：块！重要；
高度：自动！重要；
填充底部：0；
溢出：可见！重要；
可见性：可见！重要；
}
.导航栏切换{
显示：无；
}
.导航栏倒塌{
边界顶部：0；
}
/*始终应用浮动导航*/
.导航栏导航{
背景色：#000；
浮动：无；
显示：内联块；
}
.navbar nav>li{
浮动：左；
}
.navbar默认值{
背景色：透明；
边框颜色：透明；
边框顶色：白色；
}
.navbar默认值.navbar nav>li>a{
左侧填充：20px；
右边填充：20px；
垫面：3件；
垫底：3件；
颜色：白色；
字体大小：12px；
}
/*重新声明，因为我们覆盖了上面的浮动*/
.navbar-nav.navbar-right{
浮动：对；
}
}

切换导航

解决方案是将样式应用于导航栏折叠分区内的ul。以下是css

.navbar-collapse > ul {
    width: 100%;
    margin: 0 auto !important;
}

下面是一个固定的示例：

@媒体屏幕
和（最小宽度：320px）
和（最大宽度：767px）
和（方向：景观）{
身体{
保证金：0自动；
背景图像：url（../images/background_vm.jpg）；
/*背景重复：无重复*/
背景附件：固定；
背景尺寸：100%自动；
字体系列：“Tinos”、“Times New Roman”；
字体大小：22px；
边际上限：0px；
}
.头bg{
宽度：100%；
高度：50px；
背景：url（../images/nadpis2_bg.jpg）；
背景大小：100%100%；
背景附件：固定；
}
.旗帜{
利润上限：-25px；
右边填充：35px；
}
.img{
宽度：35%；
}
.集装箱{
最大宽度：760像素；
}
.内容{
填充：15px；
}
.身高{
高度：50px；
背景色：透明；
}
/*始终浮动导航栏标题*/
.导航栏标题{
浮动：左；
}
/*撤消折叠的导航栏*/
.导航栏倒塌{
显示：块！重要；
高度：自动！重要；
填充底部：0；
溢出：可见！重要；
可见性：可见！重要；
}
.导航条折叠>ul{
宽度：100%；
保证金：0自动！重要；
}
.导航栏切换{
显示：无；
}
.导航栏倒塌{
边界顶部：0；
}
/*始终应用浮动导航*/
.导航栏导航{
背景色：#000；
浮动：无；
显示：内联块；
}
.navbar nav>li{
浮动：左；
}
.navbar默认值{
背景色：透明；
边框颜色：透明；
边框顶色：白色；
}
.navbar默认值.navbar nav>li>a{
左侧填充：20px；
右边填充：20px；
垫面：3件；
垫底：3件；
颜色：白色；
字体大小：12px；
}
/*重新声明，因为我们覆盖了上面的浮动*/
.navbar-nav.navbar-right{
浮动：对；
}
}

切换导航

请使用您拥有的代码和任何其他相关样式表等创建一个样式表，以便我们可以看到问题的实际情况。将样式应用于navbar collapse div中的ul完成了工作，但现在它浮动到左侧而不是中心。在此处运行的代码段上没有左浮动。请打开一个新问题或使用新的代码段/jsFiddle更新此问题，因为我的代码段左侧没有浮点数。对不起，可能我没有正确解释它。调整屏幕宽度时，整个菜单将保留在左侧（以及上面的代码片段）。在原始代码中，导航保持在页面的中心。此解决方案按照我的要求使用了额外的代码行：.navbar nav>li{display:inline block；float:none；}