我花了好几个小时试图对此进行排序，但不能完全正确。我想要一个具有以下功能的三列Bootstrap导航栏： -
所以它看起来像
第1列将成为该品牌。第2列菜单项（如果它们都不适合将折叠为按钮）和第3列将是用户配置文件按钮或登录/注销按钮，具体取决于用户是否登录。
这是我到目前为止最接近的：jsfiddle
它非常接近，但我无法弄清楚如何阻止导航栏以特定宽度进入两行并始终确保中心列折叠为按钮，除非所有菜单项都适合。我准备好在这个阶段把电脑扔进垃圾箱。
谢谢你的期待。希望有人可以提供帮助，因为这会让我上瘾
修改
为了让我走上正确的道路，大喊大叫vanburenx。
我对原始代码进行了一些调整，根据我在下面的评论，我无法弄清楚导致崩溃的原因究竟是什么，现在还有什么使得右边的菜单项落在彼此之下。这是2个新的jsfiddles：
以下是相关代码：
navbar_style.css.scss
.wrapper {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 60px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.wrapper .navbar-default {
margin: 0px;
padding: 0px;
width: 100%;
position: fixed;
border-radius: 0px;
}
.navbar-default .navbar-collapse {
background: #f5f5f5;
}
.wrapper .login {
display: inline;
position: fixed;
right: 0px;
height: 50px;
border: transparent;
border-radius: 0px;
}
.wrapper .login .btn-group {
color: #555;
padding-top: 10px;
}
.wrapper .login .btn-group .dropdown-menu {
right: 0;
left: auto;
margin-top: 10px;
}
.wrapper .login .btn-group .btn-drop {
background: none;
border: none;
outline: none;
box-shadow: none;
}
.navbar-default .navbar-toggle {
float: left;
}
.no-gutter >[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
@media (max-width: 767px) {
.navbar-default .navbar-toggle {
left: 10px;
}
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 10px;
}
}
.navbar-nav li{
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-nav > li a{
padding: 12px;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.navbar-nav a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
background: #0383c0 !important;
color: #fff !important;
}
.navbar-brand img {
margin-bottom: 5px;
margin-left: 5px;
}
_top_nav.html.erb（已登录用户）
<div class="wrapper">
<div class="row no-gutter" id="nav-wrapper">
<div class="col-s-8">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" href="#"><img alt="Rwc 2015 logo" src="/assets/RWC-2015-logo.png" /></a>
<a class="navbar-brand visible-xs" href="#"><img alt="Rwc 2015 logo" src="/assets/RWC-2015-logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>
<a class="dropdown-toggle" data-method="get" href="/">Home</a>
</li>
<li><a data-method="get" href="/matches">Matches</a></li>
<li><a data-method="get" href="/pools">Pools</a></li>
<li><a data-method="get" href="/match_picks">Your Picks</a></li>
<li><a data-method="get" href="/leagues">Leagues</a></li>
<li><a data-method="get" href="/venues">Venues</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--end nav-->
</div>
<!--end col9-->
<div class="col-s-4">
<div class="login">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
testuser2@test.ie
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#"><a data-method="get" href="/users/edit"> Edit Account</a></a></a>
</li>
<li>
<a data-method="delete" href="/users/sign_out" rel="nofollow"> Log Off</a>
</li>
</ul>
<li><a href="#">Help</a></li>
</li>
</ul>
</div>
<!--end col3-->
</div>
<!--end row-->
</div>
</div>
<!--end wrapper-->
_top_nav.html.erb（未登录用户）
<div class="wrapper">
<div class="row no-gutter" id="nav-wrapper">
<div class="col-s-8">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" href="#"><img alt="Rwc 2015 logo" src="/assets/RWC-2015-logo.png" /></a>
<a class="navbar-brand visible-xs" href="#"><img alt="Rwc 2015 logo" src="/assets/RWC-2015-logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>
<a class="dropdown-toggle" data-method="get" href="/">Home</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--end nav-->
</div>
<!--end col9-->
<div class="col-s-4">
<div class="login">
<ul class="nav navbar-nav">
<li><a href="/users/sign_in">Log In</a></li>
<li><a href="/users/sign_up">Sign Up</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<!--end col3-->
</div>
<!--end row-->
</div>
</div>
<!--end wrapper-->
答案 0 :(得分：2)
Here's an example of how this can be done by splitting you're navbar between columns.
.wrapper {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 60px;
margin: 0 auto;
}
.wrapper .navbar-default {
margin: 0px;
padding: 0px;
width: 100%;
position: fixed;
border-radius: 0px;
}
.navbar-default .navbar-collapse {
background: #f5f5f5;
}
.wrapper .login {
display: inline;
position: fixed;
right: 0px;
height: 50px;
border: transparent;
border-radius: 0px;
}
.wrapper .login .btn-group {
color: #555;
padding-top: 10px;
}
.wrapper .login .btn-group .dropdown-menu {
right: 0;
left: auto;
margin-top: 10px;
}
.wrapper .login .btn-group .btn-drop {
background: none;
border: none;
outline: none;
box-shadow: none;
}
.navbar-default .navbar-toggle {
float: left;
}
.no-gutter >[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
@media (max-width: 767px) {
.navbar-default .navbar-toggle {
left: 10px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="row no-gutter">
<div class="col-xs-9">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">GNOMIS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li><a href="/news">News</a>
</li>
<li><a href="/Shop">Shop</a>
</li>
<li><a href="/news">Toast</a>
</li>
<li><a href="/news">News</a>
</li>
<li><a href="/news">News</a>
</li>
<li><a href="/news">News</a>
</li>
<li><a href="/news">News</a>
</li>
<li><a href="/news">News</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--end nav-->
</div>
<!--end col9-->
<div class="col-xs-3">
<div class="login">
<div class="btn-group">
<button type="button" class="btn btn-drop dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User Name <span class="glyphicon glyphicon-user"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="/users/id" title="Profile">Profile</a>
</li>
<li> <a href="/logout" title="Logout">Logout </a>
</li>
</ul>
</div>
</ul>
</div>
<!--end col3-->
</div>
<!--end row-->
</div>
</div>
<!--end wrapper-->
<div class="container">
<div class="alert alert-info">Bootstrap</div>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.</p>
</div>答案 1 :(得分：0)
尝试在bootstrap.css中应用以下css
.navbar-nav {
float: left;
margin-top: 10 !important;
}
答案 2 :(得分：0)
向导航栏添加自定义类，该类不能多行：
<nav class="navbar navbar-default force-single-line-nav">
用css：
@media only screen and (min-width: 767px) {
.force-single-line-nav {
/* hide what would be displayed on a second row of nav bar */
max-height: 51px !important;
overflow-y: hidden;
}
}
即：您只需强制隐藏（overflow: hidden）任何超出您为导航栏指定的高度的内容。
@media查询就在这里，因为在狭窄的屏幕上，你并不关心导航条走多线：它已经由Bootstrap（展开 - 折叠）处理了。
当然，您需要调整上面的51px和767px，以及实际项目的值和断点。