將字段嵌入到標籤

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中並且定位標籤。