Question

有没有办法将标签使用水平格式与下面的代码放在一起？

我一直在尝试不同控件上的“左拉”，“拉右”，“nopadding”，但似乎无法更紧密地将它们组合在一起。

<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

我认为这就是你想要的。

<强> FIDDLE

您可以通过在标签上添加负边距来缩小标签和输入之间的空间。

<强> 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建议使用类似于(see here)的方式执行水平表单，但我觉得这种方法不允许在间距方面有很大的灵活性。

就个人而言，我会将表单更改为this。因为您在CSS中自己声明了宽度，所以您可以根据需要自定义间距。这可能不会崩溃，但如果你希望你可以编写更多的CSS来处理低分辨率。

Bootstrap 3水平形式间距

2 个答案: