防止Navbar中的元素转到Bootstrap 3中的第二行

Question

我正在努力使用Bootstrap 3的以下navbar中的对齐。

问题： Login和Signup元素位于不同的行上。什么是正确的调整方式，以便它们都在同一条线上？ display: inline-block;和white-space: nowrap;似乎不适用于li元素。

请注意，input元素应填充徽标和Login / Signup元素之间的空格。

Bootply： http://www.bootply.com/Bh5TBV9vS0

<nav class="navbar navbar-default navbar-fixed-top">

HTML

    <a class="brand" href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" width="100">
    </a>

    <form role="form" class="form-horizontal search-form">        
        <!-- <i class="fa fa-search"></i> -->
        <input type="text" class="form-control" placeholder="Search">
    </form>

    <ul class="nav navbar-nav">
        <li><a href="/users/sign_in">Login</a></li>
        <li><a href="/users/sign_up">Sign up</a></li>
    </ul>

</nav>

CSS：

.brand {
    width: 170px;
    height: 80px;
    background-color: #ccc;
    display: inline-block
}

.navbar.transparent.navbar-inverse .navbar-inner {
   background: rgba(0,0,0,0.4);
}

.search-form {
    width: 100%;
    height: 30px;
    display: inline-block;
}

.search-form {
    margin-top:10px;
    padding: 0 10px;
}

nav { display: flex; }

Answer 1

删除列表项的float:left并应用dispaly:inline-block并为white-space:nowrap元素应用样式ul。

  ul.navbar-nav{ white-space:nowrap;}
 .navbar-nav li{display:inline-block; float:none;}

Answer 2

我已从.search-form更新100% to 76%的宽度，现在效果正常。

检查here