这就是 bootstrap 的导航栏形式。
默认的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>
但是我想像
input-group
一样将输入和按钮连接在一起。但是,当我尝试将输入和按钮包装在input-group
周围时,它最终占据了整个宽度: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>
我已经阅读some solutions for this,但是我想避免像
style: "width: 200px;"
一样使用hacks 有什么办法吗?非常感谢。
最佳答案
我想到了一种在不修改Bootstrap文档中使用的navbar表单的默认结构的情况下解决此问题的最小方法。
将类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/)
关于html - bootstrap 3:导航栏形式的输入组占用整个宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19893187/