首页 > bootstrap如何把label嵌入到input里面呢?

bootstrap如何把label嵌入到input里面呢?

如图,如何把“用户名”之类的放到input的首段的五分之一的位置呢?

然后在剩余的五分之四输入内容呢?

<div class="row">
    <form class="form-horizontal" name="userForm" ng-submit="submitForm()">
        <div class="form-group">
            <h2 class="text-center">用户注册流程form验证</h2>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-5">
                <input type="text" name="name" class="form-control" placeholder="UserName" ng-model="user.name"
                       required>
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">邮箱:</label>
            <div class="col-sm-5" ng-class="{ 'has-error': userForm.email.$invalid && !userForm.email.$pristine }">
                <input type="email" name="email" class="form-control" placeholder="Email" ng-model="user.email"
                       required>
                <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">请输入有效的邮箱。</p>
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">手机:</label>
            <div class="col-sm-5" ng-class="{ 'has-error': userForm.phone.$invalid && !userForm.phone.$pristine }">
                <input type="number" name="phone" class="form-control" placeholder="Phone" ng-model="user.phone"
                       ng-minlength="11" ng-maxlength="11" required>
                <p ng-show="userForm.phone.$invalid && !userForm.phone.$pristine" class="help-block">请输入您的手机号码。</p>
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码:</label>
            <div class="col-sm-5">
                <input type="password" name="password" class="form-control" placeholder="Password"
                       ng-model="user.password" required ng-minlength="6">
            
            </div>

        </div>
        <div class="form-group">

            <div class="col-sm-4">
                <button type="submit" class="btn btn btn-primary col-sm-12" ng-disabled="userForm.$invalid">提交</button>
            </div>
        </div>

    </form>
</div>

input 设置个 padding-left: 20% ?


用input group


   <form class="bs-example bs-example-form" role="form">
      <div class="input-group">
         <span class="input-group-addon">用户名</span>
         <input type="text" class="form-control" placeholder="请输入用户名">
      </div>
   </form>

看看这种效果行不行

【热门文章】
【热门文章】