引导 3 水平表单间距

Question

有没有办法使用下面的代码使用水平表单将标签放置在更靠近控件的位置？

我一直在不同的控件上尝试"向左拉"、"向右拉"、"无填充"，但似乎无法将它们更紧密地移动到一起。

<div class="page-header">
        <h1>sample</h1>
    </div>
    <div class="container nopadding">
        <div class="row">
            <div class="form-group nopadding">
                <label for="recordId" class="col-sm-2 control-label">Record Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="recordId" placeholder="Record Id">
                </div>
            </div>
            <div class="form-group nopadding">
                <label for="id" class="col-sm-2 control-label">Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="id" placeholder="Password">
                </div>
            </div>
            <div class="form-group nopadding">
                <label for="familyName" class="col-sm-2 control-label">Family Name</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
                </div>
            </div>
        </div>
    </div>

Answer 1

我认为这就是你想要的。

小提琴

您可以通过向标签添加负边距来减少标签和输入之间的空间。

.CSS：

label {
    margin-right: -20px;
}

.HTML：

<div class="page-header">
        <h1>sample</h1>
    </div>
    <div class="container nopadding">
            <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="recordId" class="col-sm-2 control-label">Record Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="id" class="col-sm-2 control-label">Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="id" placeholder="Password"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="familyName" class="col-sm-2 control-label">Family Name</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
                </div>
            </div>
        </form>
    </div>

另外，不知道为什么你有一个带有类row的div。应为form标签。我已经在 HTML 中为我的答案和小提琴调整了它。

Answer 2

标签的宽度由附加到它们的 col-sm-2 类决定。您可以将其修改为 col-sm-1，但这可能会导致较小的设备上出现问题。

虽然 bootstrap 建议以类似于你做水平形式的方式（见这里），但我觉得这种方法在间距上没有太大的灵活性。

就个人而言，我会将形式更改为这样的行为。因为您是在 CSS 中自己声明宽度的，所以您可以根据需要自定义间距。这可能不会很好地折叠，但如果你愿意，你可以进一步编写CSS来处理低分辨率。