如何使内联表单引导中心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

Answer 2

我会尝试添加text-align: center到表单中.请参阅我的示例(请注意,要查看效果,您必须选择"整页".否则,bootsrap默认为移动视图).

编辑:

哎呀!我想你不需要inline-block.inline-bock无论如何我还是有它.:P

#search_panel {
    text-align: center;	
}

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

我不确定我是否理解你的问题，但这里有一个居中表格的示例：

http://jsfiddle.net/Lfw3v0p6/

我只是添加了一些CSS：

.form-inline {
    text-align: center;
}

如果这不是您想要的，请更新您的问题以提供更多详细信息或您尝试过的示例。