将字段嵌入到标签

Question

我需要在标签标签和包含使用引导程序的输入的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> 

这里是我的example上W3Schools的TryIt编辑器。如何使标签与.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中并且定位标签。