html - CSS Bootstrap : why does my page view differently in mobile browsers Chrome and 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 无法正确呈现它:

类 form-control 具有以下 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