twitter-bootstrap 导航栏上的搜索表单向左/向右拉动在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18054508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Search form pull-left/pull-right on the navigation bar does not work right in Chrome
提问by Bryant Zheng
I am migrating from the Twitter Bootstrap version 2.3.2 to the latest version 3 RC 1. Now I meet one problem with the search buttons in the top navigation bar. HTML code is below:
我正在从 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>
The problem is, it works perfectly in Firefox, but in Chrome or IE 9 it makes the search box super long and thus moves this search box and button below the navigation bar.
问题是，它在 Firefox 中完美运行，但在 Chrome 或 IE 9 中，它使搜索框超长，从而将此搜索框和按钮移动到导航栏下方。
I tried troubleshooting and found if I removed "pull-right" from the form, the search box and button will be moved above inline with the navigation items, but lost the effect that pull-right brought - it would occupy all line space on the right.
我尝试了故障排除，发现如果我从表单中删除“右拉”，搜索框和按钮将与导航项内联移动到上方，但失去了右拉带来的效果 - 它会占用所有行空间对。
Moreover as debugging if i replaced the search form with
此外作为调试，如果我用
<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>
Then it will simply work well; but it's not my purpose either.
然后它会很好地工作；但这也不是我的目的。
Any issue with my code? Or is it a problem with the version 3 RC 1? Anyway to address it?
我的代码有问题吗？还是版本3 RC 1有问题？无论如何要解决它？
回答by Schmalzy
You can add the col-sm-4class to your <form>element.
您可以将col-sm-4类添加到您的<form>元素中。
This should keep them the correct width depending on the screen width.
这应该根据屏幕宽度使它们保持正确的宽度。
Play with the column sizing (col-sm-**) until you get it the way you want it.
调整列大小 (col-sm-**)，直到按照您想要的方式进行调整。
