Question

我在一个使用Bootstrap类的网页中有一个表单，示例如下：

<form>
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="username class="form-control" />
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="passwordclass="form-control" />
    </div>
    <input type="submit" class="btn btn-primary" value="submit" name="submit" />
</form>

在移动设备上，表格最初会按照我希望的那样显示。表格元素垂直堆叠。

但是当我点击用户名或密码输入框时，标签会缩小。如何保持标签文本大小不变？

由于

Answer 1

这是工作小提琴，工作得很好 http://jsfiddle.net/52VtD/9094/

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">First Name</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="Enter First Name">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">Last Name</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="Enter Last Name">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <input type="submit" class="btn btn-primary" value="submit" name="submit" />
      </div>
   </div>
</form>

Answer 2

在元标记的视口上，属性/值content =＆＃34; width = device-width，initial-scale = 1＆＃34;加入。完整的元标记现在是：

<meta name="viewport" content="width=device-width, initial-scale=1">

这似乎解决了这个问题。在移动设备上，当我点击输入条目时，所有标签字体大小都会保留

当输入文本获得焦点时，移动设备中的引导程序表单标签会减小

2 个答案: