html - 如何居中内联表单 bootstrap 3

Question

我正在尝试制作一个包含多个选项的搜索栏并希望将其居中

<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>

Answer 1

你也可以合并类

如果你改变你的定义

<form class="form-inline" role="form">

到 <form class="form-inline text-center" role="form">它应该有效!

我想在添加额外样式之前尽可能多地保留普通 Bootstrap

bootstrap 带有本地对齐类，可以在这里找到:http://getbootstrap.com/css/#type-alignment

HTH