对齐不同的引导列

Question

我写了一张如here所示的表格 CSS 是：

#mainContainer {
    width: 1000px;
    margin: 0px auto;
    overflow: hidden;
}
.form {
    padding-left: 0%;
    height: 123px;
    min-height: 520px;
    min-width: 350px;
    width: 34%;
    background: #166bb3;
}
#formDiv {
    margin: 5%;
}
#username, #selectCou {
    width: -moz-available;
    height: 36px;
}
#dob {
    height: 36px;
}
#selectGen {
    height: 36px;
    width: 149px;
}  

您可以看到Or位于表单下方。我希望它出现在Fill your information here旁边。我该怎么办？ 为了更清楚，这是屏幕截图：

Answer 1

试试这个：

<div class="row">
    <div class="col-md-6">
    <h4>Fill your information here</h4>

    //put your form here

    </div>
    <div class="col-md-6">
    <h4>Or</h4>

    //your Or content here

    </div>
    </div>

Answer 2

如果你想使用Bootstrap列，你应该坚持使用已实现的Grid系统类（你可以找到doc here）。 此网格系统将一行划分为12个hypotetical列，您可以根据需要放大，请记住最大宽度为12.您可以有12列宽度为1/12或2列，宽度为6/12或任意组合总宽度必须为12/12的列。

要达到你想要的效果，你应该连续包装2个6-col div。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            Left form
        </div>
        <div class="col-md-6">
            Right form
        </div>
    </div>
</div>