Bootstrap 3 RC2 自定义导航栏固定顶部在两条线上
[英] Bootstrap 3 RC2 custom navbar fixed top goes on two line
本文介绍了Bootstrap 3 RC2 自定义导航栏固定顶部在两条线上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Bootstrap 3 RC2,并且我正在尝试将导航栏固定在顶部,但不是全宽.我已经复制了 css 中的navbar-fixed-top"声明,并创建了我的.在 IE (10) 上,这很有效,但在 Chrome (28) 上,该栏有两行.
我是否错过了让导航栏的内容始终在同一行上的内容?
谢谢.
引导:http://bootply.com/74981
CSS:
.navbar-custom {边框宽度:0 0 1px;位置:固定;顶部:0;右:100px;z-索引:1030;}.navbar-custom .navbar-form {填充右:0;}.navbar-custom {边界半径:0;-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;边框右下角半径:5px;边框左下角半径:5px;}
html:
<!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button class="navbar-toggle" type="button" data-target=".navbar-ex1-collapse" data-toggle="collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>按钮><a title="Accueil" class="navbar-brand" href="/">弗拉米</a>
<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse navbar-ex1-collapse"><ul class="nav navbar-nav"><li><a href="#">新闻</a></li><li><a href="#">事件</a></li>
<a class="dropdown-toggle" href="#" data-toggle="dropdown">游戏 <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">游戏 1</a></li><li><a href="#">游戏 2</a></li><li><a href="#">游戏 3</a></li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">项目 <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">大项目1</a></li><li><a href="#">大项目2</a></li><li><a href="#">大项目3</a></li> <li><a href="#">论坛</a></li><form class="navbar-form navbar-right" action="/Account/Logout" method="post"><div class="btn-group"><a class="btn btn-default" href="#">注册</a><a class="btn btn-default" href="#">登录</a><div class="btn-group"><button title="Language" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-flag"></i>按钮><ul class="dropdown-menu pull-right"><li><a href="#">语言</a></li><li><a href="#">语言</a></li><li><a href="#">语言</a></li>
</表单>
<!--/.navbar-collapse --></nav>
解决方案
问题在于 Bootstrap 的浮动布局技术以及您没有为导航栏设置显式宽度的事实,因此您可以尝试设置 min-宽度
适合您的所有内容或将此修复添加到您的 CSS:
.navbar-custom .navbar-collapse {向左飘浮;}
更新 bootply http://bootply.com/74987# >
I am using Bootstrap 3 RC2, and I am trying to make a navbar fixed to top, but without being full width. I have copied the "navbar-fixed-top" declarations in the css, and created mine. On IE (10), this works well, but on Chrome (28) the bar goes on two lines.
Have I missed something to have navbar's content always on same line ?
Thanks.
The bootply : http://bootply.com/74981
The CSS :
.navbar-custom {
border-width: 0 0 1px;
position: fixed;
top: 0;
right: 100px;
z-index: 1030;
}
.navbar-custom .navbar-form {
padding-right: 0;
}
.navbar-custom {
border-radius: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
The html :
<nav class="navbar navbar-inverse navbar-custom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-ex1-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a title="Accueil" class="navbar-brand" href="/">
Flammy
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Games <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Game 1</a></li>
<li><a href="#">Game 2</a></li>
<li><a href="#">Game 3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Projects <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Big project 1</a></li>
<li><a href="#">Big project 2</a></li>
<li><a href="#">Big project 3</a></li>
</ul>
</li>
<li><a href="#">Forums</a></li>
</ul>
<form class="navbar-form navbar-right" action="/Account/Logout" method="post"> <div class="btn-group">
<a class="btn btn-default" href="#">Register</a>
<a class="btn btn-default" href="#">Login</a>
<div class="btn-group">
<button title="Language" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-flag"></i>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Language</a></li>
<li><a href="#">Language</a></li>
<li><a href="#">Language</a></li>
</ul>
</div>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</nav>
解决方案
The problem lies in Bootstrap's floating layout techniques and the fact that you have no explicit width set for your navbar, so you can try setting a min-width
that fits all your content or adding this fix to your CSS:
.navbar-custom .navbar-collapse {
float:left;
}
Updated bootply http://bootply.com/74987#
这篇关于Bootstrap 3 RC2 自定义导航栏固定顶部在两条线上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!