twitter-bootstrap - 如何在引导程序中分隔列

Question

我在大学项目上遇到了麻烦，我无法完全理解它。根据我在线阅读的内容，您使用 col-xx-x 沿 12 列网格分隔 div。我在这里尝试使两个输入框都沿上排居中，按钮的外边缘在下一行与上面输入框的外边缘对齐。

我不确定这是我应该使用 CSS 还是使用 col-md-x 来解决的问题。谢谢你的帮助 ：-）

<div class="row">
    <div class="col-md-2"></div>        <!-- spacing divs-->
    <div class="col-md-4">
        <div class="input-group">
            <input type="Email" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
    </div>
    <div class="col-md-4">
        <div class="input-group">
            <input type="Password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
        </div>
    </div>
    <div class="col-md-2"></div>        <!-- spacing divs-->
</div>

<div class="row">
    <div class="col-md-2"></div>    <!-- spacing divs-->
    <div class="col-md-3">
        <button type="button" class="btn btn-primary">Login</button>
    </div>

    <div class="col-md-3">
        <button type="button" class="btn btn-danger">Reset Psasword</button>
    </div>
    <div class="col-md-2"></div>    <!-- spacing divs-->
</div>

Answer 1

您不能使用 col-xx-x 放置空 div。相反，如果您想要空列，请使用 col-xx-offset-x。

在这里阅读更多：http: //getbootstrap.com/css/#grid-offsetting