使用 Bootstrap 3 问题对齐表单中的字段答案

【问题标题】：Issue aligning fields in a form using Bootstrap 3使用 Bootstrap 3 问题对齐表单中的字段
【发布时间】：2015-03-14 09:49:48
【问题描述】：

我是 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" 的“”中，但仍然存在同样的问题。

有什么办法解决这个问题吗？

感谢您的宝贵时间。

【问题讨论】：

我经常使用的向左浮动？匹配宽度然后就可以了。

标签： css twitter-bootstrap

【解决方案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>

【讨论】：