我正在尝试制作一个具有多个选项的搜索栏,并希望将其居中显示。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="search_panel">
<div class='container'>
<form class="form-inline" role="form">
<!-- SEARCH PLACE -->
<div class="form-group">
<label class="sr-only" for="inputEmail">search</label>
<input id="where" name="where" type="search" placeholder="where you want to visit ...." class="form-control input-md" required="">
</div>
<!-- CHECK-IN DATE -->
<div class="form-group" id="start">
<i class="fa fa-calendar fa-2x"></i>
<input type='text' placeholder="Check-In Date" class="form-control" id='datepicker-start' />
</div>
<div class="form-group" id="end">
<i class="fa fa-calendar fa-2x"></i>
<input type='text' placeholder="Check-Out Date" class="form-control" id='datepicker-end' />
</div>
<!-- Button Drop Down -->
<div class="form-group">
<label class="sr-only" for="inputEmail">Select Basic</label>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</form>
</div>
</div>