gpt4 book ai didi

twitter-bootstrap - Bootstrap 3 RC2 自定义导航栏固定顶部走两行

转载 作者:行者123 更新时间:2023-12-01 03:54:44 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 3 RC2,我正在尝试将导航栏固定在顶部,但不是全宽。我已经复制了css中的“navbar-fixed-top”声明,并创建了我的。在 IE (10) 上,这很好用,但在 Chrome (28) 上,该栏分为两行。

我是否错过了让导航栏的内容始终在同一行的内容?

谢谢。

Boot :http://bootply.com/74981

的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;
}

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>

最佳答案

问题在于 Bootstrap 的 float 布局技术以及您没有为导航栏设置明确宽度的事实,因此您可以尝试设置 min-width适合您的所有内容或将此修复添加到您的 CSS:

.navbar-custom .navbar-collapse {
float:left;
}

更新了 bootply http://bootply.com/74987#

关于twitter-bootstrap - Bootstrap 3 RC2 自定义导航栏固定顶部走两行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18297500/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com