3

我有一个带有 3 个文本链接的简单导航栏、一个搜索栏和一个带有更多链接的下拉菜单，如 jsfiddle 中所示

http://jsfiddle.net/guyisra/DByTm/1/

全窗口小提琴（调整窗口大小直到 2 行）

<div class="navbar  navbar-fixed-top ">
    <div class="navbar-inner " style="padding:3px;">
        <div class="container navbar_container" style=" margin-left: 50px; "> <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="/" style=" padding: 0; width: 185px; ">
             LOGO
             <div class="sprite-logos "></div>

            </a>

            <div class="nav-collapse collapse ">
                <ul class="nav">
                    <li id="loading-indicator" style="margin-top: 8px; visibility: hidden;">
                        <div></div>
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="nav_option"><a href="/Link1"><i class="icon-envelope"> </i> Link num 1 </a>

                    </li>
                    <li class="nav_option"><a href="/Link2"><i class="icon-envelope"> </i> Link num 2</a> 
                    </li>
                    <li><a href="/Link3"><i class="icon-envelope"> </i> Link num 3</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <form accept-charset="UTF-8" action="/home" class="navbar-search pull-left" method="get">
                        <div style="margin:0;padding:0;display:inline">
                            <input name="utf8" type="hidden" value="✓">
                        </div>  <span class="icon-search" style="position:relative;vertical-align: middle;left:27px;"></span>

                        <input class="input-medium search-query" id="q" name="q" placeholder="Search" required="required" style="padding-left:29px" type="text">
                    </form>
                </ul>
                <ul class="nav pull-right">
                    <li>
                        <div>   <a href="/red" class="btn btn-danger">RED</a>

                        </div>
                    </li>
                    <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Jimmy bob
                                <b class="caret"></b>
                            </a>

                        <ul class="dropdown-menu">
                            <li><a href="/Link"><i class="icon-envelope"> </i> Link</a>

                            </li>
                            <li><a href="/Link"><i class="icon-envelope"> </i> Link</a>

                            </li>
                            <li><a href="/Link"><i class="icon-envelope"> </i> Link</a>

                            </li>
                            <li class="divider"></li>
                            <li> <a href="/Link"><i class="icon-envelope"> </i> Link</a> 
                            </li>
                            <li class="divider"></li>
                            <li> <a href="Link" data-method="delete" rel="nofollow"><i class="icon-envelope"> </i> Link</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>  <span class="sprite_loader"></span>

</div>

调整大小时，导致 nabvar 移动并形成 2 行的大小之一，如下图所示

在此处输入图像描述

我不能缩短 Link1、2、3 的名称，用户名可以更长。

我希望导航栏始终为 1 行，并且如果用户名（或右拉部分）太长而无法将搜索表单推短

有没有办法做到这一点？

4

3 回答 3

4

使用rowin acontainer是使用 Twitter Bootstrap 时的最佳实践

<div class="container">
    <div class="row">
        // your content
    </div>
</div>
于 2013-06-30T20:19:37.213 回答
0

在您的情况/示例中，将 span2 类添加到您的搜索输入字段：请参阅http://jsfiddle.net/bassjobsen/s9Mcp/1/

<input class="span2 input-medium search-query" id="q" name="q" placeholder="Search" required="required" style="padding-left:29px" type="text">
于 2013-06-30T20:19:24.590 回答
0

对我来说，问题似乎是导航栏中的东西太多了。大量的按钮、搜索表单、徽标等使其比~940px 大得多，因此它在达到触发宽度（940px）之前折叠成两行以进行折叠。不确定是否有办法解决这个问题，但我决定只删除一些按钮、缩短一些文本等，这让我过去了。

于 2013-10-08T03:50:45.390 回答