在引导导航中停止元素包装

Question

我有一个bootstrap-navbar，它环绕在一定宽度以下的两行上，有没有办法阻止它这样做而不在引导 LESS 文件中进行修改？

<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>

例如：http://jsfiddle.net/u10Lvgk8/2/

如果您在上面的项目中减小页面宽度，您会看到菜单分成两行，即使元素非常小！我做错了什么，还是这只是一个引导限制？

Answer 1

您可以使用 CSS 解决此问题。尝试将其添加到您的 CSS 文件中：

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

http://jsfiddle.net/u10Lvgk8/4/

Answer 2

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

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

由于 CSS 的工作方式，您可以在自己的 CSS 中更改这些内容（不会重载供应商样式表）。只要您的样式表在 bootstrap 之后链接，您的 CSS 规则的优先级就会高于 Bootstrap 的。这意味着，您的样式可以覆盖引导程序的样式。

所以你只需将这些更改为：

类似：

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

https://jsfiddle.net/u10Lvgk8/2/

Answer 3

您没有正确关闭具有类 navbar-brand 的跨度.. this(>) 不见了

对于较低的屏幕宽度引导程序自动将右侧导航栏放到底部，您可以通过将导航栏折叠为隐藏它，

@media screen and (max-width:768px){
	.navbar-right{
		float: right !important;
    	margin-right: -15px !important;
	}
	.navbar{border-radius:4;}
	.container-fluid>.navbar-header{    margin-right: 0;
    margin-left: 0;}
	.navbar-header {
    float: left;
	}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand">Brand</span>
    </div>
    <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>
  </div>
</nav>