自举中心水平输入

Question

所以我知道以前有人问过这个问题，但是我不明白为什么我不能让表单的输入字段在一行中居中。我要把它们堆放在移动视图上。我做了个小提琴这里。任何帮助都会很感激的。

 <div class="container">
    <div class="row">
 <form>
      <div class="col-md-4 col-sm-4 col-xs-12 offset-5" >
    <label for="start"></label>
    <input type="text" id="start" class="date-input-css" name="start" placeholder="From">
      </div>
     <div class="col-md-4 col-sm-4 col-xs-12 offset-5" >
    <label for="end"></label>
    <input type="text" id="end" name="end" class="date-input-css" placeholder="To">
        </div>
    </form>
      </div>
    </div>

Answer 1

而不是在两个输入上都使用offset-5类，而是查找类col-md-offset-2和col-sm-offset-2，特别是在两个输入中的第一个。注意，对于引导程序3，需要在类名中同时指定col-和断点，这样简单的offset-2就不能工作。

它是您要寻找的2的偏移量，因为Bootstrap列应该总是与12相加。因为您的输入都是4宽的，所以您已经有了8，留下了4。这意味着2任何一方，所以您只需要抵消2最左边的输入，因为最右边的输入将被自动抵消。

这可以从以下几个方面看到：

​

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
div.center_me {
  border: 1px solid red;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <form>
      <div class="col-md-4 col-sm-4 col-xs-12 col-md-offset-2 col-sm-offset-2 center_me">
        <label for="start"></label>
        <input type="text" id="start" class="date-input-css" name="start" placeholder="From">
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12 center_me">
        <label for="end"></label>
        <input type="text" id="end" name="end" class="date-input-css" placeholder="To">
      </div>
    </form>
  </div>
</div>

​