我的Bootstrap有问题。我对这个框架不太熟悉,我正在尝试使用<select>
下拉列表和一个按钮点击进行搜索。但由于某种原因,<input>
并没有调整到列宽。这是一个非常小的尺寸,但下拉和<input>
标签右侧的按钮是我希望它们的位置。有人可以帮助我吗?
谢谢!
<div class='container'>
<div class='row'>
<div class='col-sm-12 col-md-12 col-lg-12'>
<form method='get' action='search_results.php' class='form-inline'>
<div class='input-group'>
<div class='input-group-btn'>
<select id='selector' class='selectpicker form-control' data-live-search='true'>
<option>Categories</option>
<option>Computers</option>
</select>
</div>
<div class='input-group'>
<input type='text' class='form-control' placeholder='Search' name='searchTerm'>
</div>
<div class='input-group-btn'>
<button class='btn btn-default'><i class='glyphicon glyphicon-search'></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
答案 0 :(得分:0)
发生了什么事情是你把所有东西都包装在输入组中,这基本上控制了对象的大小。我删除了搜索周围的包装,但保留了该类别。你可以看到我设置了150px宽度的内联css(你可以在CSS端设置它来更好地管理它)
<div class='col-sm-12 col-md-12 col-lg-12'>
<form method='get' action='search_results.php'>
<div class='input-group'>
<div class='input-group-btn' style="width:150px">
<select id='selector' class='selectpicker form-control' data-live-search='true'>
<option>Categories</option>
<option>Computers</option>
</select>
</div>
<input type='text' class='form-control' placeholder='Search' name='searchTerm'>
<div class='input-group-btn'>
<button class='btn btn-default'><i class='glyphicon glyphicon-search'></i></button>
</div>
</div>
</form>
</div>