Bootstrap form-group elements spacing

Question

我试图缩小表单组复选框和文本框之间的差距。我已经尝试过＆＃34; text-right＆＃34;但仍然无法将距离缩小到非常接近，以便彼此相邻。

<form class="form-horizontal" role="form">

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-2 text-right">
            <div class="checkbox">
                <label><input type="checkbox"> Click to Check</label>
            </div>
        </div>
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder="Enter text">
        </div>
    </div>

<form>

Answer 1

您的输入元素已使用class="col-xs-2"放入相邻的列div中。使用引导列布局时，列的宽度是灵活的，并随窗口大小而变化。这意味着输入元素之间观察到的距离对于您站点的每个用户都是不同的。

如果要控制输入元素之间的距离，则需要将它们放在同一列中，或者完全放弃列布局。

除非使用引导程序inline-form，否则输入元素的样式将为width: 100%。这使得它占据了整个列，因此它将出现在一个新行上。为防止这种情况，您需要覆盖输入元素的width样式。

Answer 2

Bootstrap的基本概述对此非常重要。 col-xs-2正在获得1/12的水平空间，并且这将被修复，直到您更改bootstrap的主.css文件。但是，不建议这样做。

解决方案：删除文本右侧。