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

我正在从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>

问题是,它在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>

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

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

解决方法

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

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

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

See this jsFiddle demo

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

解决方法

相关文章