折叠时搜索表单的 Twitter Bootstrap 响应式导航栏问题

Question

当屏幕较小时，我正在使用引导响应式导航栏折叠导航栏中的链接。不过，我想在折叠区域之外保留一个按钮和一个搜索框。这是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">                    
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>

               <a class="brand" href="/">site name</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Other</a></li>    
                    </ul>
                </div>

                <form action="#" class="navbar-search pull-left">
                    <input name="search" class = "search-query" />
                </form>

                <div class="btn-group pull-right">
                    <button class="btn btn-primary">Log In</button>
                </div>
            </div>
        </div>      
    </div>

这在普通屏幕上看起来不错，但是一旦链接崩溃，按钮和搜索框就会被强制放在下方，从而使导航的高度加倍。

如果我将搜索框移到导航折叠链接的左侧，它可以正常工作，但我需要先显示链接。

任何想法如何实现这一目标？

Answer 1

不经过测试很难判断，但您可以尝试在容器中添加 white-space: nowrap 样式。

<div class="container-fluid nowrap">

CSS：

.nowrap { white-space: nowrap; }

编辑:
做了一些测试，我相信这模仿了你正在寻找的行为：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">                    
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

           <a class="brand" href="/">site name</a>

           <div class="btn-group pull-right">
                <button class="btn btn-primary">Log In</button>
            </div>
            <div class="pull-left">
           <form action="#" class="navbar-search pull-right">
                <input name="search" class = "search-query" />
            </form>

            <div class="nav-collapse pull-right">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Other</a></li>    
                </ul>
            </div>
            </div>
        </div>
    </div>      
</div>

CSS：

@media (max-width: 979px) {
    .navbar .btn-navbar { float: left !important; }
    .navbar-search { float: left; }
}

基本上，只需将链接和搜索栏浮动到 right 并将它们包装在浮动 left 的 div 中（以模拟屏幕宽度 > 979px 上的当前行为）。
然后，在窗口缩小时将链接和搜索栏浮动到 left 以避免换行。

它仍然会在非常小的屏幕宽度上中断，这仅仅是因为搜索栏太宽而无法容纳其余内容。您可以通过相应地覆盖其宽度来防止这种情况发生。
例如：

.search-query { width: 150px !important }