I'm trying to create a horizontal form layout with bootstrap: two dropdowns and an input box. I've succeeded in getting the elements horizontal using the .form.inline class, but since I added this class, for some reason my input box has jumped to the left of the two dropdowns, even though it follows the dropdowns in the html. I need it to be to the right of the dropdowns--any solutions? Here's the code:
<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>
<form class=".form-inline" role="form">
Notice that you have class=".form-inline"
as the class when it should be class="form-inline"
without the period.
You also need to change the input
parent div's class from .col-sm-4
to form-group
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.