同じ行のブートストラップラジオボタン

Question

ラジオボタンのグループradio-inlineをクラスをスタッキングせずに同じ行に整列させるにはどうすればよいですか？あなたは私がやったように、あなたのdivタグにスタイルdisplay: inlineを追加する場合

http://codepen.io/pablocgdev/pen/RKroZq

Answer 1

<div class="funkyradio"> 
      <label class="radio-inline"> <p>Output</p> 

      <div style='display:inline;' class="funkyradio-success"> 
       <input type="radio" name="radio" id="radio6" /> 
       <label for="radio6">P123F</label> 
      </div> 
      <div style='display:inline;' class="funkyradio-success"> 
       <input type="radio" name="radio" id="radio7" /> 
       <label for="radio7">ASDF</label> 
       </label> 

    </div> 

、それはあなたが所望の結果を得るべきです。私はインラインCSSを使用しましたが、あなたのCSSファイルに追加したいかもしれません。 display: inlineは、要素を保持するために必要なスペースだけを使用します。

Answer 2

私は、次のCSSコードを追加することによって、あなたの例では、同じ行にラジオボタンを置くことができました：あなたのラジオボタンがdivの内側にあるので

.funkyradio-success { 
    display: inline-block; 
} 

、あなたはそうではないことを確認する必要があります同じ行に表示できるようにdisplay:block（デフォルト値）です。