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

基本上，只需将链接和搜索栏浮动到右侧并将它们包装在浮动左侧的div中（以模仿屏幕宽度上的当前行为＆gt; 979px）。登记/> 然后，当窗口收缩时，将链接和搜索栏浮动到左侧以避免换行。

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

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

折叠后，Twitter Bootstrap响应导航栏搜索表单问题

1 个答案: