Question

我在bootstrap v3中设计了web表单。

我希望在此表单中的文本框和标签之间添加空格，同时保持其响应性。

其4列网格（中型和大型设备）＆amp; 2列网格（小型设备）

<div class="container">
    <div class="col-md-12">

    </div>
</div>

Answer 1

.form-group元素正在崩溃，因为它们的子元素正在浮动。要解决此问题，请添加clearfix或添加overflow:hidden。不幸的是，在这样做时，表单不能保持响应能力，因此您可以使用以下CSS来修复它。简而言之，当屏幕大小大于.form-group时，这会浮动所有其他992px元素。

Updated Example Here

@media(min-width:992px) {
    .form-group {
        width:50%;
    }
    .form-group:nth-child(2n) {
        float:right;
    }
    .form-group:nth-child(2n + 1) {
        float:left;
    }
}

Answer 2

想要完全响应的形式？

这样的东西会添加列col-sm

  <label class="col-xs-12 col-sm-6 col-md-3 control-label" for="Title">Title</label>

http://jsfiddle.net/LXary/1/

将填充插入引导列网格

2 个答案: