Bootstrap Horizo​​ntal Form不垂直

Question

我想创建一个表单并使其垂直。但是在我的计算机上，这些字段都是内联的：

<div class="container">
    <div class="col-sm-6 col-md-offset-3">
        <form role="form" ng-submit="submit()" ng-controller="formCtrl">
            <div class="col-sm-6 form-group">
                <input type="email" data-ng-model="form.email" placeholder="your@email.here" class="form-control">
            </div>
            <div class="col-sm-6 form-group">
                <input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
            </div>
            <div class="col-sm-4 form-group">
                <button type="submit" class="btn btn-success">sign in</button>
            </div>
        </form>
        <div id="messages"></div>
    </div>
</div>

我想要一个稍微更窄的形式，如代码所示。 class="form-horizontal"根本没有帮助。下图显示了结果！

Answer 1

将父容器类减少到col-sm-3并将子容器的类增加到col-sm-12。

因此父容器的宽度为25%，而子容器将占据父容器的整个宽度（100%）。

通过修改offset-*类来重新调整表单的居中。

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="col-sm-3 col-sm-offset-4">
        <form role="form" ng-submit="submit()" ng-controller="formCtrl">
            <div class="col-sm-12 form-group">
                <input type="email" data-ng-model="form.email" placeholder="your@email.here" class="form-control">
            </div>
            <div class="col-sm-12 form-group">
                <input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
            </div>
            <div class="col-sm-4 form-group">
                <button type="submit" class="btn btn-success">sign in</button>
            </div>
        </form>
        <div id="messages"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;