导航栏上的左/右拉搜索表单无法在Chrome中正常工作

Question

导航栏上的左/右拉搜索表单无法在Chrome中正常工作

Bry*_*eng 5 css-float twitter-bootstrap twitter-bootstrap-3

我正在从Twitter Bootstrap版本2.3.2迁移到最新版本3 RC 1.现在我遇到顶部导航栏中搜索按钮的一个问题.HTML代码如下:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Brand</a>
            <div class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Nav Item 1</a></li>
                    <li class="active"><a href="#">Nav Item 2</a></li>
                    <li><a href="#">Nav Item 3</a></li>
                    <li><a href="#">Nav Item 4</a></li>
                </ul>

                <form class="navbar-form pull-right">
                    <div class="input-group">
                        <input type="search" class="form-control" placeholder="Search"/>
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default">Search</button>
                        </span> 
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

问题是,它在Firefox中完美运行,但在Chrome或IE 9中它使搜索框超长,从而将此搜索框和按钮移动到导航栏下方.

我尝试了故障排除,发现如果我从表单中删除"向右拉",搜索框和按钮将与导航项一起移动到上方,但是失去了右拉带来的效果 - 它会占用所有的线条空间对.

此外作为调试,如果我用搜索表替换

            <form class="navbar-form pull-right">
                <div class="input-group">
                    <input type="text" placeholder="Search">
                    <button type="submit" class="btn btn-default">Search</button>
                </div>
            </form>

Run Code Online (Sandbox Code Playgroud)

然后它会很好地运作; 但这也不是我的目的.

我的代码有什么问题吗？或者它是版本3 RC 1的问题？无论如何要解决它？

Answer 1

Sch*_*lzy 7

您可以将该col-sm-4类添加到<form>元素中.

这应该保持正确的宽度,具体取决于屏幕宽度.

使用列大小调整(col-sm - **),直到按照您希望的方式获取它.

看到这个jsFiddle演示

归档时间：	12 年，3 月前
查看次数：	24618 次
最近记录：	11 年，4 月前