Twitter bootstrap 引导navbar排除项目，从不转到两行

我花了好几个小时试图把这件事分类，但还是做不好。我想要一个具有以下功能的三列引导导航栏：-

只有中柱才会折叠成按钮

导航栏从不下降到两行

所以它看起来像

第1栏|第2栏|第3栏 第1栏将是品牌。第2列是菜单项（如果它们都不合适，将折叠为按钮），第3列是用户配置文件按钮或登录/退出按钮，具体取决于用户是否登录

这是我迄今为止最接近的一次：

它非常接近，但我不知道如何阻止导航栏以一定的宽度移动到两行，并始终确保中心列折叠为一个按钮，除非所有菜单项都适合。我准备在这个阶段把我的电脑扔进垃圾箱

谢谢你的关注。希望有人能帮上忙，因为这会把我逼疯的

编辑

为了让我走上正确的道路，我向vanburenx大喊一声

我已经对原始代码做了一些调整，根据我下面的评论，我无法确定到底是什么导致了崩溃，现在，是什么让右侧的菜单项相互向下。以下是两个新的jsfiddles：

登录用户

没有登录用户

以下是相关代码：

navbar\u style.css.scss

\u top\u nav.html.erb（登录用户）

切换导航

\u top\u nav.html.erb（无登录用户）

切换导航

尝试在bootstrap.css中应用以下css

.navbar-nav {
  float: left;
  margin-top: 10 !important;
}

---

下面是一个示例，通过在列之间拆分您的

navbar

，可以实现这一点

.wrapper{
左侧填充：15px；
右侧填充：15px；
填充底部：60px；
保证金：0自动；
}
.wrapper.navbar默认值{
边际：0px；
填充：0px；
宽度：100%；
位置：固定；
边界半径：0px；
}
.navbar默认值.navbar折叠{
背景:#f5；
}
.wrapper.login{
显示：内联；
位置：固定；
右：0px；
高度：50px；
边界：透明；
边界半径：0px；
}
.wrapper.login.btn组{
颜色：#555；
填充顶部：10px；
}
.wrapper.login.btn组.下拉菜单{
右：0；
左：自动；
边缘顶部：10px；
}
.wrapper.login.btn group.btn drop{
背景：无；
边界：无；
大纲：无；
盒影：无；
}
.navbar默认值.navbar切换{
浮动：左；
}
.no排水沟>[class*='col-']{
右边填充：0；
左侧填充：0；
}
@介质（最大宽度：767px）{
.navbar默认值.navbar切换{
左：10px；
}
}

切换导航


















用户名







独自创立
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克抬起头来
其中一个比较晦涩的拉丁语单词，concertetur，来自《洛伦·伊普斯姆》的一段文字，通过对古典文学中该词的引用，发现了这个毫无疑问的来源。Lorem Ipsum来自“de Finibus Bonorum”第1.10.32节和第1.10.33节
西塞罗于公元前45年创作的《爱与恶的极端》。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet…”来自第节中的一行
1.10.32

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克抬起头来
其中一个比较晦涩的拉丁语单词，concertetur，来自《洛伦·伊普斯姆》的一段文字，通过对古典文学中该词的引用，发现了这个毫无疑问的来源。Lorem Ipsum来自“de Finibus Bonorum”第1.10.32节和第1.10.33节
马洛伦酒店
<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-->

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

.navbar-nav {
  float: left;
  margin-top: 10 !important;
}

<nav class="navbar navbar-default force-single-line-nav">

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