Javascript 引导导航中的停止元素包装

我有一个

bootstrap导航条

，它在某个宽度以下的两行上，有没有什么方法可以阻止它这样做，而不必在无引导文件中进行黑客攻击

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header"> <span class="navbar-brand">Brand</span></div>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a id="btn-dashboard" class="navbar-link">Items&nbsp;&nbsp;
                    <span class="badge">1</span></a>
            </li>
        </ul>
    </div>
</nav>

烙印



如果您在上面的项目中减小页面宽度，您将看到菜单换行到两行，即使元素非常小！是我做错了什么，还是这只是一个引导限制？
您可以使用CSS修复此问题。尝试将此添加到CSS文件：

.navbar-header {
    float:left;
}
.navbar-nav {
    float:right;
}

您可以使用CSS修复此问题。尝试将此添加到CSS文件：

.navbar-header {
    float:left;
}
.navbar-nav {
    float:right;
}

当屏幕大于768px时，您会注意到特定的引导样式生效

@media (min-width: 768px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 768px)
.navbar-header {
    float: left;
}

由于CSS的工作方式，您可以在自己的CSS中更改这些内容（无需重载供应商样式表）。只要你的样式表是在引导后链接的，你的CSS规则将具有比引导更高的优先级。也就是说，您的样式可以覆盖引导

因此，您只需将这些更改为：

比如：

@media (min-width: 460px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 460px)
.navbar-header {
    float: left;
}

当屏幕大于768px时，您会注意到特定的引导样式生效

@media (min-width: 768px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 768px)
.navbar-header {
    float: left;
}

由于CSS的工作方式，您可以在自己的CSS中更改这些内容（无需重载供应商样式表）。只要你的样式表是在引导后链接的，你的CSS规则将具有比引导更高的优先级。也就是说，您的样式可以覆盖引导

因此，您只需将这些更改为：

比如：

@media (min-width: 460px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 460px)
.navbar-header {
    float: left;
}

您没有正确关闭具有class navbar品牌的跨度。。
缺少此（>）

对于较低屏幕宽度的引导，自动将右侧导航栏降到底部，您可以通过折叠导航栏将其隐藏，如下所示：


@媒体屏幕和（最大宽度：768px）{
.导航栏对吗{
浮子：对！很重要；
右边距：-15px！重要；
}
.navbar{边界半径：4；}
.container fluid>.navbar标题{右边距：0；
左边距：0；}
.导航栏标题{
浮动：左；
}
}

烙印


项目1


您没有正确关闭具有class navbar品牌的跨度。。
缺少此（>）

对于较低屏幕宽度的引导，自动将右侧导航栏降到底部，您可以通过折叠导航栏将其隐藏，如下所示：


@媒体屏幕和（最大宽度：768px）{
.导航栏对吗{
浮子：对！很重要；
右边距：-15px！重要；
}
.navbar{边界半径：4；}
.container fluid>.navbar标题{右边距：0；
左边距：0；}
.导航栏标题{
浮动：左；
}
}

烙印


项目1


可能重复的可能重复的可能重复的我没有，好点：）。我不是在寻找汉堡包式菜单的折叠，我不明白当按钮明显小到可以放在同一条线上而不会折叠时，为什么我必须这样做@伪逻辑。。我已经更改了密码。。也许这会帮助你……：我没有，好点：）。我不是在寻找汉堡包式菜单的折叠，我不明白当按钮明显小到可以放在同一条线上而不会折叠时，为什么我必须这样做@伪逻辑。。我已经更改了密码。。也许这会对你有所帮助D@pseudological很乐意帮忙@伪逻辑很乐意帮忙！这是一个很好的建议，我给了你一票，但给了@Schultzie一个答案，因为！在我的案例中需要重要的标签。谢谢你！这是一个很好的建议，我给了你一票，但给了@Schultzie一个答案，因为！在我的案例中需要重要的标签。谢谢你！