我想了一个最小的方法来解决这个问题,而不需要修改 Bootstrap 文档中使用的导航栏表单的默认结构。
将课程
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(如有必要,放入媒体查询中):
.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;
}
或 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%;
}
}
}
结果:
为了清楚起见,我的目标是 CSS 中的后代元素。这不是定位 CSS 元素的最有效方法。如果您喜欢这个答案,请考虑为输入和按钮提供唯一的类名,并在 CSS 中不使用任何后代选择器来定位它们(请阅读:http://csswizardry.com/2011/09/writing-efficient-css-selectors/ )
您的解决方案占据整个宽度这一事实是一件好事。现在使用嵌套的行和列来定义您实际希望搜索栏占用多少空间。
<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>
编辑:我没有注意到OP要求解决方案而无需在CSS中手动设置宽度。不过,如果您不介意最大宽度,我认为这是一个不错的选择。它仅设置高分辨率的最大宽度,因此您可以在平板电脑和移动设备上保持正常行为。
1) 在 div.input-group 上添加 navbar-searchbox:
<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)将其放入您的 .lass 文件中。
@media (min-width: @screen-sm-min) {
.navbar-searchbox {
max-width: 250px;
}
}
3)在房间里跳来跳去高喊胜利!
不需要使用行,是的,这就是您需要的所有 CSS。刚有用,试试吧。
我更喜欢将表单元素视为正常元素,只是使用此 CSS 规则修复其外观:
.navbar-form .input-group {
display: inline-block;
width: auto;
vertical-align: middle;
.form-control,
.input-group-btn {
float: left;
}
}