Question

我正在从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中它使搜索框超长，从而将此搜索框和按钮移动到导航栏下方。

我尝试过排查并发现如果我从表单中删除“pull-right”，搜索框和按钮将与导航项一起移动到上方，但是失去了右拉带来的效果 - 它将占据所有行右边的空间。

此外，如果我用

替换了搜索表单，则进行调试

            <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的问题？无论如何要解决它？

Answer 1

您可以将col-sm-4课程添加到<form>元素。

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

使用列大小调整（col-sm - **），直到按照您希望的方式获得它。

See this jsFiddle demo

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

1 个答案: