Html Bootstrap 3：导航栏形式的输入组占据整个宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19893187/
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
Bootstrap 3: Input group in navbar form takes up entire width
提问by Michelle
So this is what bootstrap's navbar form looks like.
所以这就是 bootstrap 的导航栏形式的样子。
The default HTML is:
默认的 HTML 是：
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for awesome stuff">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
But I want to join the input and button together like an input-group. However, when I try to wrap the input and button around an input-group, it ends up occupying the entire width:
但我想将输入和按钮像input-group. 但是，当我尝试将 input 和 button 包裹在 a 周围时input-group，它最终占据了整个宽度：
HTML:
HTML：
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for awesome stuff">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
I've read some solutions for this, but I want to avoid using hackslike style: "width: 200px;"
我已经阅读了一些解决方案，但我想避免使用像style: "width: 200px;"
Any solutions? Thanks so much in advance.
任何解决方案？非常感谢。
采纳答案by Michelle
I thought of a minimal way to fix this without modifying the default structure of the navbar form used in the Bootstrap documentation.
我想到了一种解决此问题的最小方法，而无需修改 Bootstrap 文档中使用的导航栏表单的默认结构。
Add class navbar-input-groupto the form
navbar-input-group向表单添加类
<form class="navbar-form navbar-left navbar-input-group" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for awesome stuff">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
CSS (place in media query if necessary):
CSS（如有必要，放置在媒体查询中）：
.navbar-input-group {
font-size: 0px; /*removes whitespace between button and input*/
}
.navbar-input-group input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
}
or SCSS (keeps responsiveness intact):
或 SCSS（保持响应性不变）：
@import "bootstrap-variables";
.navbar-input-group {
@media (min-width: $screen-sm) {
font-size: 0px; /*removes whitespace between button and input*/
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.btn {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
}
}
@media (max-width: $screen-xs-max) {
margin-top:0px;
margin-bottom:0px;
.btn {
width:100%;
}
}
}
Result:
结果：
For purposes of clarity, I am targeting descendant elements in the CSS. This is not the most efficient way to target CSS elements. If you like this answer, consider giving the input and button unique class names and targeting them without any descendant selectors in your CSS (read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)
为清楚起见，我的目标是 CSS 中的后代元素。这不是定位 CSS 元素的最有效方法。如果您喜欢这个答案，请考虑为输入和按钮提供唯一的类名，并在您的 CSS 中没有任何后代选择器的情况下将它们作为目标（阅读：http: //csswizardry.com/2011/09/writing-efficient-css-selectors/）
回答by James Lai
The fact that your solution takes up the entire width is a good thing. Now use nested rows and columns to define how much space you actually want that search bar to consume.
您的解决方案占据整个宽度的事实是一件好事。现在使用嵌套的行和列来定义您实际希望该搜索栏占用多少空间。
<div class="row">
<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for awesome stuff">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
</div>
回答by user2847643
Edit: I didn't notice OP asked for a solution without manually setting width in css. Still, I think this is a good alternative if you don't mind the max-width. And it only sets the max-width for the high resolutions, so you keep the normal behavior on tablet and mobile.
编辑：我没有注意到 OP 要求没有在 css 中手动设置宽度的解决方案。不过，如果您不介意最大宽度，我认为这是一个不错的选择。它只为高分辨率设置最大宽度，因此您可以在平板电脑和移动设备上保持正常行为。
1) Add navbar-searchbox on div.input-group:
1) 在 div.input-group 上添加导航栏搜索框：
<form class="navbar-form navbar-left" role="search">
<div class="input-group navbar-searchbox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>
2) Put this in your .lass file.
2) 把它放在你的 .lass 文件中。
@media (min-width: @screen-sm-min) {
.navbar-searchbox {
max-width: 250px;
}
}
3) Jump around the room shouting victory!
3）在房间里跳来跳去高喊胜利！
No need use rows, and yes that is all the CSS you need. Just works, try it.
不需要使用行，是的，这就是您需要的所有 CSS。刚好用，试试看。
回答by Tim
I prefer to treat the form element as normal, and just fixed its apperance using this CSS rule:
我更喜欢将表单元素视为正常元素，并使用此 CSS 规则修复其外观：
.navbar-form .input-group {
display: inline-block;
width: auto;
vertical-align: middle;
.form-control,
.input-group-btn {
float: left;
}
}
