引导无线电集团 - 水平对齐方式

Question

我这个引导标记与在线单选按钮组：

<div class="container"> 
    <section id="content"> 

     <form class="form-horizontal" role="form" name="myForm"> 
      <div class="panel panel-default"> 

       <div class="panel-heading"> 
        <h3 class="panel-title">Panel title</h3> 
       </div> 

       <div class="panel-body"> 

        <div class="form-group"> 
         <div class="col-sm-6 col-sm-offset-3"> 
          <label for="myField" class="control-label">Radio title:</label> 

          <label class="radio-inline"> 
           <input type="radio" name="myField" value="normal" /> RADIO1 
          </label> 

          <label class="radio-inline"> 
           <input type="radio" name="myField" value="high" /> RADIO2 
          </label> 
         </div> 
        </div> 

       </div> 
      </div> 
     </form> 

    </section> 
</div> 

它看起来像这样：

怎样才能让标题和电台输入水平对齐？

看到这个JSFiddle：http://jsfiddle.net/dennismadsen/u6qus4ud/1/。

Answer 1

在标签中添加vertical-align:middle;或vertical-align:top;。

label { 
vertical-align: middle; 
} 

检查Fiddle。

Answer 2

应用.form-group .radio-inline { vertical-align: top; }他们

Answer 3

要做到这一点，你需要使用vertical-align属性。

Answer 4

在标签标记中，将无线电在线类更改为无线电类。

<label class="radio"> 
<input type="radio" name="myField" value="normal" /> RADIO1 
</label> 
<label class="radio"> 
`enter code here`<input type="radio" name="myField" value="high" /> RADIO2 
          </label>