ブートストラップ - ラジオボタンのレイアウト

Question

私はブートストラップ3を使用するウェブページを持っています。このページでは、いくつかのラジオボタンがあります。それらの中には短いラベルがあります。いくつかはより長いラベルを持っています。私は、彼らがこのようにレンダリングされるように、私のラジオボタンをフォーマットしたいと思います：

+------------------------------------------------------+ 
| o Choice 1           | 
|              | 
| o Choice 2. This is a longer label that should  | 
| wrap. Notice how the wrap does not happen under | 
| the radio button. Rather the text is justified  | 
|              | 
| o Choice 3           | 
+------------------------------------------------------+ 

これを実行しようとする試みで、私はdisplay:inline-block;を使用することにしましたが、それは働いていません。私は本当にinline-flexを使用したいと思います。しかし、私はターゲットブラウザのためにそれを使用することはできません。だから、私はまっすぐなHTMLを使ってこの機能を模倣しようとしました。私はこれをBootplyに作成しました。しかし、折り返し動作は依然として正しくありません。私のHTMLは次のようになります：

<div class="container"> 
    <div id="myChoices"> 
     <label class="choice"> 
      <input id="SelectedStation" name="SelectedStation" type="radio" value="1"> 
      <span class="outer"><span class="inner"></span></span> 
      <p>ABC</p> 
     </label> 
     <br> 

     <label class="choice"> 
      <input id="SelectedStation" name="SelectedStation" type="radio" value="2"> 
      <span class="outer"><span class="inner"></span></span> 
      <p>CBS</p></label> 
     <br> 

     <label class="choice"> 
      <input id="SelectedStation" name="SelectedStation" type="radio" value="3"> 
      <span class="outer"><span class="inner"></span></span> 
      <p> This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p> 
     </label> 
     <br> 

     <label class="choice"> 
      <input id="SelectedStation" name="SelectedStation" type="radio" value="4"> 
      <span class="outer"><span class="inner"></span></span> 
      <p>NBC</p> 
     </label> 
     <br> 
    </div> 
</div> 

どうしましたか？ a）ラジオボタンの下の行にラベルが表示され、b）ラベルにテキストの折り返しがないのはなぜですか？

は

Answer 1

をpタグをcol-xs-10クラスを追加します。代わりに.SelectedStationクラスを使用してください。

第二に、あなたは.SelectedStationに.choice上relativeポジショニング、absoluteポジショニングを使用し、あなたの<p> sのいくつかの左パディングを適用することができます。

.choice { 
 
    position: relative; 
 
    display: block; 
 
} 
 
.SelectedStation { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.choice p { 
 
    padding-left: 22px; 
 
}

<div class="container"> 
 
    <div id="myChoices"> 
 
    <label class="choice"> 
 
     <input class="SelectedStation" name="SelectedStation" type="radio" value="1"> 
 
     <span class="outer"><span class="inner"></span></span> 
 
     <p>ABC</p> 
 
    </label> 
 
    <br> 
 

 
    <label class="choice"> 
 
     <input class="SelectedStation" name="SelectedStation" type="radio" value="2"> 
 
     <span class="outer"><span class="inner"></span></span> 
 
     <p>CBS</p> 
 
    </label> 
 
    <br> 
 

 
    <label class="choice"> 
 
     <input class="SelectedStation" name="SelectedStation" type="radio" value="3"> 
 
     <span class="outer"><span class="inner"></span></span> 
 
     <p>This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p> 
 
    </label> 
 
    <br> 
 

 
    <label class="choice"> 
 
     <input class="SelectedStation" name="SelectedStation" type="radio" value="4"> 
 
     <span class="outer"><span class="inner"></span></span> 
 
     <p>NBC</p> 
 
    </label> 
 
    <br> 
 
    </div> 
 
</div>

Answer 2

#myChoices p { 
    display: inline-block; 
} 

pタグは、今私たちは、あなたがブートストラップを使用しているとして、あなたはラップ問題に

を修正するために、次のクラスを使用することができ、インラインブロックに

を変更し、ブロック要素ですありがとう

col-xs-12クラスを#myChoice divタグに追加する

col-xs-2 classすべてのspan.outerタグ

pタグが不可能な場合はまず、あなたは一度、単一のページに比べて同じid以上を使用することはできません例codependiv

にラップ、pタグに