Bootstrap列对齐

Question

我正在使用Bootstrap（v3.3.7）设计一个包含一行1列的表单和其他包含2列的行：

在包含2列（Town和Country）的行上，第一个字段与上部和下部线相比向左移位了一点。这是因为Town标签在col-md-4列中的宽度为col-md-6，与其他行中宽度为col-md-2的其他标签不同col-md-12的列。

我之后选择了这个设计，在移动视图中，我会添加一些设置来移动城镇下面的城镇。

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="town" class="col-md-4 control-label">Town</label>
            <div class="col-md-8">
                <input id="town" name="town" class="form-control" type="text" v-model="address.town">
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label for="address_type" class="col-md-4 control-label">Country</label>
            <div class="col-md-8">
                <select id="country_id" name="address_type" class="form-control" v-model="address.country_id">
                    <option v-for="country in countries" :value="country.id">
                        {{country.name}}
                    </option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label for="note" class="col-md-2 control-label">Comment</label>
            <div class="col-md-10">
                <textarea id="note" name="note" class="form-control" v-model="address.note"></textarea>
            </div>
        </div>
    </div>
</div>

有没有办法使用相同的设计，但使用对齐的输入控件？

Answer 1

首先，您需要在添加列之前添加一行，因为行的左右边距为-15px，列的两边都有15px填充，因此它完全适合div。当你添加一个cols＆amp;行确保您将其添加到容器中。您可以覆盖行中的减去边距和列中的填充。在检查之前添加一行包装form-group div