center bootstrap col-xs-* class（居中bootstrap固定宽度输入机器人）

Question

我正在尝试将 bootstrap 输入字段置于 div 列的中心，但我尝试过的 none 方法似乎有效。

到目前为止我尝试过的：

<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

试试这个：

<div class="col-xs-4 text-center">
  <input type="date" id="host_name" value="" required="" />
</div>

或

<center>
  <input type="date" id="host_name" value="" required="" />
</center>

Answer 2

你不能只使用：中心吗？它负责并以一切为中心。

<center><input type="date" id="host_name" value="" required="" /> </center>

Answer 3

您可以通过多种方式执行此操作：使用网格或根本不使用网格，使用 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>

Answer 4

添加一个自定义 class，对你的 col-xs-4 div 说 myClass，像这样：

<div class="col-xs-4 center-block myClass">
    <input type="date" id="host_name" value="" required="" />
</div>

然后将此添加到您的 css:

.myClass {  
   text-align:center;
}
.myClass input {
   display:inline-block;
}

Link 到 jsFiddle：https://jsfiddle.net/e0d8my79/119/

Answer 5

如果你试图让按钮在 col-xs-4 div 内居中，那么你应该可以通过使用 text-center class 来实现（如果 #host_name 有 display:inline-block)，或使用 margin:0 auto（如果 #host_name 有 display:block）

如果您试图使按钮相对于整个页面居中，您可以尝试删除 col-xs-4 class，然后将 div 的宽度设置为您需要的宽度，然后使用 margin:0 auto

center bootstrap col-xs-* class（居中bootstrap固定宽度输入机器人）

Center bootstrap col-xs-* class (centering bootstrap fixed width input bot)

html

css

jquery

jquery-mobile

twitter-bootstrap