我为bootstrap 3中的选择框菜单设置了标签,如下所示:
<div class="col-lg-2">
<label>Filter</label>
<select class="form-control" name="sort">
<option value="1">1</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
输出中的参见选择框菜单顶部的标签:
我需要在选择框菜单中显示标签内嵌,如下所示:
如何在内联中显示标签?!
DEMO JSFIDDLE
答案 0 :(得分:10)
你需要把你的标签和你的选择放在一个“组”里面,所以我们有这个:
<div class="form-group">
<label for="sort" class="col-sm-2 control-label"> Filter </label>
<div class="col-sm-10">
<select class="form-control" name="sort" id="sort">
<option value="1">1</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
</div>
答案 1 :(得分:0)
您想要“表单内联”
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="dashboard-filter">Filter By</label>
<select id="dashboard-filter" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
答案 2 :(得分:0)
您想要form-inline
-此示例在全屏模式下工作(不确定在非全屏模式下此代码段为何会环绕),但请稍作调整,以使其对您有效。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="dashboard-filter">Filter By</label>
<select id="dashboard-filter" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</form>