Html 引导多输入内联
我很难在表单的一行中输入两个和一个文本。我能够得到两个选择内联,但文本输入是顽固的。以下是当前代码的外观:Html 引导多输入内联,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我很难在表单的一行中输入两个和一个文本。我能够得到两个选择内联,但文本输入是顽固的。以下是当前代码的外观: <form role='form' action='#' method='post'> <div class='form-group'> <label for='query-bar' class='sr-only'></label> <input type='text' class='form-c
<form role='form' action='#' method='post'>
<div class='form-group'>
<label for='query-bar' class='sr-only'></label>
<input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' />
</div>
<div class='form-inline'>
<div class='form-group'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
<option></option>
</select>
</div>
<div class='form-group'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
</form>
柱
操作员
您可以使用以下选项:
<div class='form-inline row'>
<div class='form-group col-sm-4'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
</select>
</div>
<div class='form-group col-sm-4'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group col-sm-4'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
类行
被添加到表单内联
元素中,类col-sm-4
被添加到表单组
元素中。此外,将.form control
元素的宽度设置为100%
,以覆盖在特定屏幕尺寸下应用的width:auto
.form-inline .form-control {
width: 100%;
}