CSS bootstrap：为什么我的页面在移动浏览器Chrome和Firefox中的浏览方式不同

Question

这是我的代码，它将在屏幕上呈现输入字段：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ....
<div class="form-group ">
       <label class="col-xs-8 col-sm-4 col-md-5 col-lg-2 control-label" id="categoryLabel">Request *</label>
       <div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6">
             <select id="category" name="" class="form-control">
               //options
             </select>
        </div>
</div>

这在PC浏览器中看起来很完美，但在客户的反馈之后，我注意到android上的Firefox无法正确呈现它：

类表单控件具有以下css：

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out     .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

其余的类都是bootstrap v3.0.0类。

关于我如何使firefox浏览器像chrome浏览器一样渲染的任何想法？

由于

Answer 1

尝试更改标签网格。

<label class="col-xs-8 - 更改为<label class="col-xs-12