ブートストラップ・グリッド・システムは、2つのラベルを並べて配置しています。

Question

これらの2つのラベルと入力をどのように並べるかを考えています。誰かが私がどこに間違っているかもしれないか教えてくれませんか？私はちょうどそれらがお互いの隣に並んでいることを望む。

<div class="row"> 
    <div class="col-lg-12"> 
     <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label> 
      <div class="form-group"> 
       <div class="col-xs-4"> 
        <cfinclude template="../ddl/gender.cfm"> 
       </div> 
      </div> 
    </div> 
    <div class="col-lg-12"> 
     <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm"> 
      <div class="form-group"> 
       <div class="col-lg-1"> 
        <cfoutput> 
        <cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) ---> 
       </div> 
       <div class="col-lg-3"> 
        <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" /> 
        </cfoutput> 
        <span id="result_<cfoutput>#Add#</cfoutput>"></span> 
       </div> 
      </div> 
    </div> 
</div> 

どのように私はセックスと同じライン上の運転免許証番号を入れていますか？それはCOL-LG-6をするために変更

EDIT

は、同じ行にそれらを置く彼らはまだ、このように見える終わりますか？私は彼らがそんなにひどく見えないようにしようとしています。

EDIT 2

<div class="row"> 
    <div class="col-lg-5"> 
     <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label> 
      <div class="form-group"> 
       <div class="col-lg-10"> 
        <cfinclude template="../ddl/gender.cfm"> 
       </div> 
      </div> 
    </div> 
    <div class="col-lg-7"> 
     <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm"> 
      <div class="form-group"> 
       <div class="col-lg-2"> 
        <cfoutput> 
        <cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) ---> 
       </div> 
       <div class="col-lg-5"> 
        <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" /> 
        </cfoutput> 
        <span id="result_<cfoutput>#Add#</cfoutput>"></span> 
       </div> 
      </div> 
    </div> 
</div> 

私はそれが良く見えるように左に多くの運転免許証番号を削除するにはどうすればよいですか？

Answer 1

col-lg-12の代わりにcol-lg-6クラスを使用して、これら2つの要素が6〜6列になるようにする必要があります。だから彼らはまったく同じ列に収まる。

UPDATE：

<div class="row"> 
<div class="col-lg-4"> 
    <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label> 
     <div class="form-group"> 
      <div class="col-xs-4"> 
       <cfinclude template="../ddl/gender.cfm"> 
      </div> 
     </div> 
</div> 
<div class="col-lg-8"> 
    <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm"> 
     <div class="form-group"> 
      <div class="col-lg-4"> 
       <cfoutput> 
       <cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) ---> 
      </div> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" /> 
       </cfoutput> 
       <span id="result_<cfoutput>#Add#</cfoutput>"></span> 
      </div> 
     </div> 
</div> 

Answer 2

彼らは広い両方とも12列です。サイズを6にして、サイズの半分にしてみてください。