Question

我有一个bootstrap表单，我想根据屏幕大小定位标签。

目前我有这段代码：

＆＃13;

<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>

＆＃13;

这是输出：

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

Answer 1

首先，row需要与容器一起使用，如上所述，您必须更改col-xs-的值。对于全宽度，您需要在标签上指定 12 ，以便获取所有宽度并将输入推送到下一行。

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

＆＃13;

<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>

＆＃13;

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

1 个答案: