Question

我是Bootstrap的新手，我正在创建一个包含两个输入字段的注册表单：

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

    <label class="control-label" for="user_password">Password</label>

    <div class="controls">
        <input type="{{passwordType}}" data-ng-change="passwordChanged();" data-ng-model="user.password"
               class="form-control" id="user_password" name="user_password"
               placeholder="Password" required>
    </div>

</div>


<div class="form-group">

    <label class="control-label">Show Password</label>

    <div class="controls">
        <input type="checkbox" data-ng-model="showPassword" data-ng-checked="showPassword"
               data-ng-click="switchPasswordType()">
    </div>

</div>

但是我不知道我缺少什么样的CSS样式但是标签和输入字段在网格容器的左边一个接一个地出现，所以不像通常的形式。我试图将两者都置于带有style =“display：inline-block”的“”内，并且仍然存在同样的问题。

任何想法如何制作？

感谢您的时间。

Answer 1

找到解决方案，我刚刚创建了一行，其中一列用于标签，另一列用于输入，并且它完成了工作。

 <div class="row">
                        <div class="col-sm-6">
                            <label class="control-label" class="" for="user_email">Email</label>
                        </div>
                        <div class="col-sm-6">
                            <div class="controls">
                                <input type="email" auto-focus autofocus="true" data-ng-model="user.email"
                                       id="user_email" name="user_email"
                                       placeholder="Insert your email" required>
                            </div>
                        </div>

                    </div>

使用Bootstrap 3在表单中对齐字段

1 个答案: