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

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

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

由于CSS的工作方式，您可以在自己的CSS中更改它们（不会超载供应商样式表）。只要您的样式表在引导程序之后链接，您的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品牌的跨度.. 缺少此（＆gt;）

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

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

在bootstrap导航中停止元素换行

3 个答案: