Question

我需要在label标签和包含使用Bootstrap的输入的div标签之间进行对齐。我的代码如下所示：

<div class="container">
         <div class="col-lg-6" id="3_1i2c5e">
            <div class="row">
               <label id="3_1i2c6e_LABEL" style="display:inline; " class="formFieldTitle col-lg-2">Client</label>
               <div id="3_1i2c6e_FIELD" class="col-lg-10 form-control-static">
                  <input type="text" class="form-control" disabled="disabled" placeholder="0000001">
               </div>
            </div>
         </div>
      </div>

这是我在W3Schools TryIt编辑器上的example。如何使标签与.form-control？

内联

Answer 1

这是Bootstrap中的标准水平形式。

<div class="container">
    <div class="row">
        <div class="col-lg-6" id="3_1i2c5e">
            <div class="row">
                <form class="form">
                    <div class="form-group">
                        <div class="row">
                            <style>
                                label { top: 6px; }
                            </style>
                            <label id="3_1i2c6e_LABEL" class="col-sm-1">Client</label>
                            <div id="3_1i2c6e_FIELD" class="col-sm-5">
                                <input type="email" class="form-control" disabled="disabled" placeholder="0000001" />
                            <div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

那些动态的ID并没有什么区别，可以让它们像你想的那样动态。我也去了整理你的Bootstrap的麻烦。

使用这种格式的标签是因为它们看起来似乎没有任何垂直对齐，所以你可以添加top 6px，或者你认为合适的任何东西让它死亡。我显然把它放在我的例子的标记中，但我建议你把它放在你的CSS中并定位标签。

将字段内联对齐到标签

1 个答案: