这只是我第二次使用 stackoverflow,如果有任何错误,请原谅我。
我在增加默认 Bootstrap 导航栏搜索表单的宽度时遇到了问题。我已经尝试了一些我在 stackoverflow 上看到的解决方案,但似乎没有任何效果。
请参阅:http://jsfiddle.net/94zkLh8j/1/
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" class="read-more" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vouchipster</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div style="display:table;" class="input-group">
<input type="text" class="form-control" placeholder="Search for retailers, categories or products">
<span class="input-group-btn">
<button class="btn btn-green" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
最佳答案
您可以在文档样式表中设置 input
元素的宽度。使用 !important
覆盖任何 Bootstrap 宽度。我建议在表单中添加一个 id,以便于在 css 中进行选择
HTML
...
<form class="navbar-form navbar-right" role="search" id="navBarSearchForm">
...
CSS
<style>
#navBarSearchForm input[type=text]{width:430px !important;}
</style>
关于html - 增加 Bootstrap 导航栏搜索表单宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30511315/