Bootstrap - 單選按鈕的佈局

Question

我有一個使用Bootstrap 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

首先，你不能多次使用相同的id更在一個單一的頁面;所以請使用.SelectedStation類。

其次，你可以使用relative定位上.choice，absolute定位於.SelectedStation和應用一些左填充到您的<p>秒。

.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標籤是塊元素，現在我們改爲inline-block的，

，你正在使用的引導，可以使用下列類來解決包裝問題

add col-xs-12 class to #myChoices div標記

add col-xs-2 class to all span.outer標記

添加col-xs-10類p標籤，如果p標籤不div

可能包裹p標籤示例codepen