Bootstrap输入组字段大小不正确 [英] Bootstrap input group field not sizing correctly
问题描述
我对Bootstrap有问题.我是这个框架的新手,我正在尝试获得一个带<select>
下拉菜单和一个单击搜索按钮的搜索栏.但是由于某些原因,<input>
的大小没有达到列宽.它的尺寸很小,但是我希望它们位于<input>
标签右侧的下拉菜单和按钮.有人可以帮我吗?
I have a problem with Bootstrap. I'm kind of new to this framework, and I'm trying to get a searchbar with a <select>
dropdown and a button to click on for searching. But for some reason, the <input>
isn't not sizing up to the column width. It's staying a very small size but the dropdown and the button to the right of the <input>
tag are where I want them to be. Could someone help me out?
谢谢!
<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>
推荐答案
发生的事情是您将所有内容包装在input-group中,这基本上控制了对象的大小.我删除了搜索周围的包装,但保留了该类别.您可以看到我设置了一个150px宽度的内联CSS(可以在CSS端进行设置以更好地管理它)
What happened was you were wrapping everything in input-group, which basically controls the sizing of the object. I removed the wrapping around the search, but kept it for the category. You can see I set an inline css of 150px width (you can set this on the CSS side to better manage it)
<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>
这篇关于Bootstrap输入组字段大小不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!