我尝试使用bootstrap创建一个水平表单布局:两个下拉列表和一个输入框。我已成功使用.form.inline类将元素设置为水平,但由于我添加了这个类,由于某种原因,我的输入框已经跳转到两个下拉列表的左侧,即使它遵循了下拉列表中的下拉列表。 HTML。我需要它在下拉菜单的右边 - 任何解决方案?这是代码:
<form class=".form-inline" role="form">
<!-- Department button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Department <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Course button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Course Number <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!--Professor Input-->
<div class="col-sm-4">
<input type="text" class="form-control" id="input" placeholder="Instructor">
</div>
</form>
答案 0 :(得分:2)
<form class=".form-inline" role="form">
请注意,如果没有句点,则class=".form-inline"
为class="form-inline"
。
您还需要将input
父div的课程从.col-sm-4
更改为form-group