jquery - 居中 Bootstrap col-xs-* 类(居中 Bootstrap 固定宽度输入机器人)

Question

我正在尝试将 Bootstrap 输入字段置于列 div 的中心，但我尝试过的所有方法似乎都不起作用。

到目前为止我尝试了什么:

<div data-role="page" id="add-host" class="container">
      <div class="default-template">
              <h1>Enter the information about the host</h1>
                <div class="col-xs-4 center-block">
                    <input type="date" id="host_name" value="" required="" />
              </div>
       </div>
</div>

Answer 1

您可能有很多方法可以做到这一点:使用网格或根本不使用网格，使用或不使用 Bootstrap 表单类。如果您使用的是网格，则应尽可能使用偏移量。列偏移 Docs

工作示例:

/*#4 */

.input-control {
  max-width: 200px;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="alert alert-info">#1 Using the Grid with Bootstrap Form Classes</div>
  <div class="row">
    <div class="default-template">
      <h1 class="text-center">Enter the information about the host</h1>
      <div class="col-sm-4 col-sm-offset-4">
        <input type="date" class="form-control" value="" required="" />
      </div>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <div class="alert alert-info">#2 Using the Grid without Bootstrap Form Classes</div>
  <div class="row">
    <div class="default-template text-center">
      <h1>Enter the information about the host</h1>
      <div class="col-sm-4 col-sm-offset-4">
        <input type="date" value="" required="" />
      </div>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <div class="alert alert-info">#3 Not Using the Grid without Bootstrap Form Classes</div>
  <div class="default-template text-center">
    <h1>Enter the information about the host</h1>
    <input type="date" value="" required="" />
  </div>
</div>

<hr>

<div class="container">
  <div class="alert alert-info">#4 Not Using the Grid but With Bootstrap Form Classes</div>
  <div class="default-template">
    <h1 class="text-center">Enter the information about the host</h1>
    <input type="date" class="form-control input-control" value="" required="" />
  </div>
</div>