5

我正在从 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 有问题？无论如何要解决它？

4

1 回答 1

7

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

这应该根据屏幕宽度使它们保持正确的宽度。

使用列大小 (col-sm-**) 直到您得到它想要的方式。

看到这个 jsFiddle 演示

于 2013-08-05T15:32:03.193 回答