使用Twitter Bootstrap排列單選按鈕答案

藉助Twitter Bootstrap 3.3.7，我試圖排列多個問題，其中包含內嵌單選按鈕答案，並讓所有問題的單選按鈕排列起來，以便最終用戶顯示更好。使用Twitter Bootstrap排列單選按鈕答案

如果這是在超小設備，我希望單選按鈕位於下一行。

我遇到的麻煩是應用col-sm-6（或任何列大小）似乎不工作，因爲我期望。 help-block沒有完全轉到下一行，它卡在單選按鈕下。

我期待能夠使用正確的Twitter Bootstrap表單語法。這是可能的形式語法，或者這是否需要使用自己的行/ cols？

問題的一個例子：的jsfiddle https://jsfiddle.net/y8j5f0of/

<div class="row"> 
    <div class="form-group"> 
     <label class="col-sm-6">This is an example question</label> 
     <div class="col-sm-6"> 
      <label class="radio-inline"> 
       <input type="radio" name="answer1" value="Yes"> Yes 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="answer1" value="No"> No 
      </label> 
     </div> 
     <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span> 
    </div> 
</div>

答案一字排開，但輸出不正常流動。

如果我刪除col-sm-6，符合市場預期但答案是不排隊的一切流動。此外，這不允許單選按鈕去他們自己的線額外的小設備。

的jsfiddle https://jsfiddle.net/nz36k74o/1/

<div class="row"> 
    <div class="form-group"> 
     <label>This is an example question 1 that is longer than question 2</label> 
     <label class="radio-inline"> 
      <input type="radio" name="answer1" value="Yes"> Yes 
     </label> 
     <label class="radio-inline"> 
      <input type="radio" name="answer1" value="No"> No 
     </label> 
     <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span> 
    </div> 
</div>

輸出

來源

2017-05-05 Kirk

<跨度類= 「幫助塊COL-SM-6」>添加COL-SM-6在這裏。 – tech2017

如果我做'col-xs-12'，它會將幫助塊包裹到下一行。看起來這是它可以用於我認爲沒問題的所有視圖的唯一方式。如果你想回答下來，我會接受它 – Kirk

幫助塊可以「內聯塊」而不是「塊」 – blecaf

幫助塊確實應該在一個新行。如果它應該在其他內容的下面，那麼它不是該行的一部分。這是Bootstrap網格系統的基礎。一個基本問題塊應該是這樣的：

<div class="form-group"> 
    <div class="row"> 
     <label class="col-sm-6">This is an example question 1 that is longer than question 2</label> 
     <div class="col-sm-6"> 
     <label class="radio-inline"> 
      <input type="radio" name="answer1" value="Yes"> Yes 
     </label> 
     <label class="radio-inline"> 
      <input type="radio" name="answer1" value="No"> No 
     </label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span> 
     </div>    
    </div> 
</div>

退房的fiddle（抱歉onlyhad時間做一個）

來源

2017-05-05 19:56:37 sn3ll

這裏是一個解決方案，以正確對齊的問題。它增加了一些額外的html標籤，但我相信它解決了你的問題。

這是更新的小提琴。 https://jsfiddle.net/nz36k74o/3/

<div class="form-group"> 
    <label class="col-sm-6">This is an example question</label> 

    <div class="col-sm-6"> 
    <label class="radio-inline"> 
     <input type="radio" name="answer1" value="Yes"> Yes 
    </label> 

    <label class="radio-inline"> 
     <input type="radio" name="answer1" value="No"> No 
    </label> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-6"> 
    <span class="help-block">This is an example help block.</span> 
    </div> 
</div>

來源

2017-05-05 19:56:54 mrdeleon

使用Twitter Bootstrap排列單選按鈕答案

回答

相關問題