如何根据屏幕宽度调整Bootstrap表单标签的显示位置

嘿，我懂你想要的效果——在小屏幕上让标签自动移到输入框上方，避免挤在一起对吧？你的原代码在小屏设备上还是把标签和输入框放在同一行，空间不够时会显得特别局促。咱们用Bootstrap的响应式布局特性来改一下：

修改后的完整代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form name="addUser">
  <!-- 用户名表单组 -->
  <div class="form-group row">
    <label class="control-label col-xs-12 col-md-2 col-lg-2">
      User Name <span class="required">*</span>
    </label>
    <div class="col-xs-12 col-md-3 col-lg-3">
      <input type="text" ng-model="user.userName" class="form-control" />
    </div>
  </div>

  <!-- 密码表单组 -->
  <div class="form-group row">
    <label class="control-label col-xs-12 col-md-2 col-lg-2">
      Password <span class="required">*</span>
    </label>
    <div class="col-xs-12 col-md-3 col-lg-3">
      <input type="password" ng-model="user.password" class="form-control" />
    </div>
  </div>

  <!-- 邮箱表单组 -->
  <div class="form-group row">
    <label class="control-label col-xs-12 col-md-2 col-lg-2">
      Email <span class="required">*</span>
    </label>
    <div class="col-xs-12 col-md-3 col-lg-3">
      <input type="text" ng-model="user.email" class="form-control" />
    </div>
  </div>
</form>

关键改动说明： #

• 给每个表单行外层添加form-group类：这是Bootstrap表单的核心布局类，能自动给表单组添加合适的上下间距，让各个表单项之间更清晰。
• 调整标签的响应式列类：
  • 小屏幕（col-xs-12）：让标签独占一整行，自然跑到输入框上方。
  • 中大屏幕（col-md-2 col-lg-2）：保留你原来的宽度设置，和输入框并排显示。
• 调整输入框的响应式列类：
  • 小屏幕（col-xs-12）：占满屏幕宽度，避免输入框过窄影响输入体验。
  • 中大屏幕保持原有的col-md-3 col-lg-3宽度不变。

这样调整后，手机等小屏设备上每个标签都会单独占一行，输入框紧随其后铺满宽度；桌面大屏幕上则保持你原本想要的标签和输入框并排的布局，完美适配不同尺寸的设备~

内容的提问来源于stack exchange，提问作者Naveen