ブートストラップCSS - その下にあるインラインラジオでコントロールラベルを取得する方法

Question

私のフォームには、上にラベルと全角入力の2つの列があります。私の問題は、私は今、ラジオを必要とする2つのフィールドがあるということです。私は2つに列を分割し、その下に2つのラジオを持つ2つのラベルがあります。私はそれを得ることができますが、アライメントは、次のフィールドの上に右ではないです。

あなたはこのbootply http://www.bootply.com/VlFHq0daui

リース資産とmesneレートの単位で、ここでそれを見ることができます。その下のキーコードが正しく整列していません。

<form> 

    <div class="row"> 

    <div class="col-lg-6"> 

     <div class="form-group"> 
      <label for="address_line1" class="control-label">Address 1</label> 
      <input type="text" class="form-control" id="address_line1"> 
     </div> 

     <div class="form-group"> 
      <label for="address_line1" class="control-label">Address 2</label> 
      <input type="text" class="form-control" id="address_line2"> 
     </div> 

     <div class="form-group"> 
      <label for="town" class="control-label">Town*</label> 
      <input type="text" class="form-control" id="town"> 
     </div> 

     <div class="form-group"> 
      <label for="county" class="control-label">County</label> 
      <input type="text" class="form-control" id="county"> 
     </div> 

     <div class="form-group"> 
      <label for="eircode" class="control-label">Eircode</label> 
      <input type="text" class="form-control" id="eircode"> 
     </div> 
    </div> 

    <div class="col-lg-6"> 

     <div class="form-group"> 
      <label for="reference" class="control-label">Reference</label> 
      <input type="text" class="form-control" id="reference"> 
     </div> 

     <div class="form-group"> 
      <label for="tax_reference" class="control-label">Tax Reference</label> 
      <input type="text" class="form-control" id="tax_reference"> 
     </div> 

     <div class="form-group"> 
      <label for="local_authority" class="control-label">Local Authority</label> 
      <select name="local_authority" id="local_authority" class="form-control"> 
       <option>Select...</option> 
       <option value="41">Ahtlone Town Council</option> 
       <option value="88">Youghal Town Council</option> 
      </select> 
     </div> 

     <div class="form-group"> 

      <div class="row"> 
       <div class="col-lg-6"> 

        <label for="leased_property" class="control-label">Leased Property?</label> 
        <br> 

        <label class="radio-inline"> 
         <input type="radio" name="leased_property" id="leased_property" value="YES"> Yes 
        </label> 

        <label class="radio-inline"> 
         <input type="radio" name="leased_property" id="leased_property" value="NO"> No 
        </label> 

       </div> 

       <div class="col-lg-6"> 

        <label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label> 
        <br> 

        <label class="radio-inline"> 
         <input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes 
        </label> 

        <label class="radio-inline"> 
         <input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No 
        </label> 

       </div> 
      </div> 

     </div> 

     <div class="form-group"> 
      <label for="key_code" class="control-label">Key Code</label> 
      <input type="text" class="form-control" id="key_code"> 
     </div> 

     <div class="form-group"> 
      <label for="gprn_number" class="control-label">GPRN Number</label> 
      <input type="text" class="form-control" id="gprn_number"> 
     </div> 

     <div class="form-group"> 
      <label for="mprn_number" class="control-label">MPRN Number</label> 
      <input type="text" class="form-control" id="mprn_number"> 
     </div> 

    </div> 

</div> 

</form> 

Answer 1

あなたが入力ボックスの同じ高さのdiv内のラジオ入力をワープすることができます

<div class="radios"> 
    <label class="radio-inline"> 
     <input type="radio" name="leased_property" id="leased_property" value="YES"> Yes 
    </label> 

    <label class="radio-inline"> 
     <input type="radio" name="leased_property" id="leased_property" value="NO"> No 
    </label> 
</div> 

CSS：

.radios{ 

    height: 34px; 
    padding: 5px; 

} 

Bootply

Answer 2

あなたのCSSにこれを追加します。

.form-group { 
    min-height:59px; 
    } 

Answer 3

私は解決策を見つけた後、完璧ではないが問題を解決します。 ラジオの要素をrowにラップし、必要な余白をハードコードして、ボタンを好きなように整列させることができます。このため私はrowにカスタムクラスalign-radiosを与えました。

HTML：

<div class="row align-radios"> 
    <label class="radio-inline"> 
     <input type="radio" name="leased_property" id="leased_property" value="YES"> Yes 
    </label> 

    <label class="radio-inline"> 
     <input type="radio" name="leased_property" id="leased_property" value="NO"> No 
    </label> 
</div> 

CSS：これはあなたに少し助け

.align-radios { 
    margin: 7px 0 7px 5px; 
} 

希望。