html - Bootstrap 表单组元素间距

Question

我试图缩小表单组的复选框和文本框之间的差距。我已经尝试过“text-right”，但仍然无法将间隙缩小到非常接近，使其彼此相邻。

<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 中。当使用 Bootstrap 列布局时，列的宽度是灵活的，并且随着窗口的大小而变化。这意味着观察到的输入元素之间的距离对于您网站的每个用户都是不同的。

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

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