html - Bootstrap - 根据屏幕宽度更改标签位置

Question

我有一个 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="row">
    <label class="control-label col-xs-2 col-md-2 col-lg-2">
    	                User Name <span class="required">*</span>
    	          </label>
    <div class="col-xs-3 col-md-3 col-lg-3">
      <input type="text" ng-model="user.userName" class="form-control" />
    </div>

  </div>
  <div class="row">
    <label class="control-label col-xs-2 col-md-2 col-lg-2">
    	                Password <span class="required">*</span>
    	          </label>
    <div class="col-xs-3 col-md-3 col-lg-3">
      <input type="password" ng-model="user.password" class="form-control" />
    </div>

  </div>
  <div class="row">
    <label class="control-label col-xs-2 col-md-2 col-lg-2">
    	                Email <span class="required">*</span>
    	          </label>
    <div class="col-xs-3 col-md-3 col-lg-3">
      <input type="text" ng-model="user.email" class="form-control" />
    </div>


  </div>
</form>

这是输出:

我正在尝试在这样的小屏幕上自动调整此表单:

Answer 1

首先，row 需要与container 一起使用，并且如上所述，您必须更改col-xs- 的值。对于全宽，您需要在标签上指定 12 以便它占据所有宽度并将输入插入下一行。

并且您没有义务输入 col-xs-12 如果您希望它们保持较小而不是全宽，您可以使用任何低于 12 的值:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form name="addUser">
  <div class="container">
    <div class="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-6 col-md-3 col-lg-3">
        <input type="text" ng-model="user.userName" class="form-control" />
      </div>

    </div>
    <div class="row">
      <label class="control-label col-xs-12 col-md-2 col-lg-2">
                    Password <span class="required">*</span>
              </label>
      <div class="col-xs-6 col-md-3 col-lg-3">
        <input type="password" ng-model="user.password" class="form-control" />
      </div>

    </div>
    <div class="row">
      <label class="control-label col-xs-12 col-md-2 col-lg-2">
                    Email <span class="required">*</span>
              </label>
      <div class="col-xs-6 col-md-3 col-lg-3">
        <input type="text" ng-model="user.email" class="form-control" />
      </div>


    </div>
  </div>
</form>