表格对齐/

Question

由于未知原因，这两个元素移动到页面的边缘。 行李箱（onli log and pass）有原因吗？

        

  <div class="control-group" ng-class="{true: 'error'}[submitted && form.log.$invalid]">

                <label class="control-label" for="log" class="col-sm-3 control-label">Логин:
                <input type="text" name="log" ng-model="mobile"   required ng-pattern="/[A-Za-z]/" id="log" />
                <span class="help-inline" ng-show="submitted && form.log.$error.required">Обязательное поле.</span>
                    <div class="custom-error"  ng-show="form.log.$error.pattern">Только латинские буквы</div><br>
                </label>
            </div>
        </div>
        <div class="form-group2">
            <div class="control-group2" ng-class="{true: 'error'}[submitted && form.pas.$invalid]">
                    <label class="control-label" for="pas" lass="col-sm-3 control-label">Пароль</label>
                    <input type="text" name="pas" ng-model="mobile2"   required ng-pattern="/[A-Za-z]/" id="pas" />
                    <span class="help-inline" ng-show="submitted && form.pas.$error.required">Обязательное поле.</span>
                    <span class="help-inline" ng-show="submitted && form.pas.$error.pattern">Только латинские буквы и цифры</span>
                    <div class="custom-error"  ng-show="form.pas.$error.pattern">Только латинские буквы</div><br>
                </div>
            </div>
       <button ng-click='SaveUser()' name="Регистрация"  class="btn btn-primary col-sm-offset-3">Регисрация</button>
        {{ csrf_field() }}

    </form>
</div>

http://jsbin.com/wapunutexi/1/edit?html,output

Answer 1

有几件事情有误。

1. 您的标签元素上有多个类属性
2. 使用第二个元素中的标签包装整个输入
3. 您在标签
的第二个元素中缺少“c”类
4. 您使用的是form-group2作为一个类，它在Bootstrap中不存在，并且您没有自定义类来支持它

我修正了以下四项内容，并对您的bin进行了相同的更新：

    <div class="form-group">
      <label for="firstName"
             type="phone"
             class="col-sm-3 control-label">Номер телефона </label>
      <input type="text"
             name="phone"
             pattern="[0-9]{2,32}"
             required>
    </div>

    <div class="form-group">
      <div class="control-group"
           ng-class="{true: 'error'}[submitted && form.log.$invalid]">
        <label for="log"
               class="col-sm-3 control-label">Логин:</label>
        <input type="text"
               name="log"
               ng-model="mobile"
               required
               ng-pattern="/[A-Za-z]/"
               id="log">
        <span class="help-inline"
              ng-show="submitted && form.log.$error.required">Обязательное поле.</span>
        <div class="custom-error"
             ng-show="form.log.$error.pattern">Только латинские буквы</div>
      </div>
    </div>

    <div class="form-group">
      <div class="control-group"
           ng-class="{true: 'error'}[submitted && form.pas.$invalid]">
        <label for="pas"
               class="col-sm-3 control-label">Пароль</label>
        <input type="text"
               name="pas"
               ng-model="mobile2"
               required
               ng-pattern="/[A-Za-z]/"
               id="pas">
        <span class="help-inline"
              ng-show="submitted && form.pas.$error.required">Обязательное поле.</span>
        <span class="help-inline"
              ng-show="submitted && form.pas.$error.pattern">Только латинские буквы и цифры</span>
        <div class="custom-error"
             ng-show="form.pas.$error.pattern">Только латинские буквы</div>
      </div>
    </div>