フィールドの並べ替え

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> 

はここW3SchoolsのTryItエディタ上で私exampleです。 .form-controlでラベルをインラインで作成するにはどうすればよいですか？

Answer 1

これはブートストラップの標準的な水平形です。

<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を整理するのにも苦労しました。

この形式のラベルは、縦方向の配置がないと表示されるため、6pxのtopを追加することができます。私は明らかに私の例ではマークアップに入れましたが、あなたのCSSに入れてラベルをターゲットにすることをお勧めします。