将内联字段与标签对齐

Question

我需要使用 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 中并定位标签。