使用bootstrap的iOS Checkbox不会居中

Question

由于WebKit的样式，我正努力让复选框在iOS上正确居中。我正在使用bootstrap来创建响应式设计。

这是我的代码被iOS破坏的结果：

我使用以下代码：

<div class="form-group">
    <label class="control-label col-xs-5 col-sm-2" for="formatA">Format:</label>
    <div class="col-xs-3 col-sm-2">
        <input type="checkbox" class="form-control" id="formatA" name="formatA">
    </div>
    <div class="col-xs-4 col-sm-4">
        <input type="date" class="form-control" id="formatD" name="formatD" placeholder="Enter date of format approval">
    </div>
</div>

Answer 1

好吧，所以我已经找到了解决方案的傻瓜。我再次看了一下bootstrap网格语法，有点看到你的网格布局可能存在一些问题。我从头开始了，这就是我想出来的

http://plnkr.co/edit/x3vDfl15LA2yxxDOeUQT

<div class="container-fluid">
      <div class="row">
        <div class="col-xs-4">
          <label class="control-label" for="formatA">Format:</label>
        </div>
        <div class="col-xs-4">
          <input type="checkbox" class="" id="formatA" name="formatA" />
        </div>
        <div class="col-xs-4">
          <input type="date" class="form-control" id="formatD" name="formatD" placeholder="Enter date of format approval" />
        </div>
      </div>
    </div>

CSS

html{
      font-size: 16px;
    }
    input[type="checkbox"]{
      display:block;
      margin:0 auto;
      padding: 20px;
    }
    input[type="date"]{
      width:100%;
    }

这让我在iPhone 6+上得到了这个结果 iphone6