Css 引导3水平形状间距

是否有任何方法可以使用带有以下代码的水平表格将标签靠近控件

我已经在不同的控件上尝试了“向左拉”、“向右拉”、“不添加”，但似乎无法将它们更紧密地移动到一起

<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>

样品
记录Id
身份证件
姓

我想这就是你想要的

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

CSS:

label {
    margin-right: -20px;
}

<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>

HTML:

label {
    margin-right: -20px;
}

<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>

样品
记录Id
身份证件
姓

---

另外，我也不知道为什么会有一个div，上面有class

row

。应该是

表单

标记。我已经在HTML中为我的答案和提琴做了调整。

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

虽然bootstrap建议使用与您类似的方式来处理水平表单，但我觉得这种方法在间距方面没有太大的灵活性

---

就我个人而言，我会改变形式，让自己表现得像。因为您自己在CSS中声明宽度，所以可以根据需要自定义间距。这可能不会很好地崩溃，但如果您希望可以编写进一步的CSS来处理低分辨率。

表单在哪里？当放置在引导层时，它的构造很差。若要调整边距，请调整列类、.form组（在form horizontal中）和.row（尽管.form组在该类中充当.row）上的左侧和右侧边距，使左侧和右侧的边距为负数，与边距相等。