在Bootstrap無線電列表中顯示輸入文本

Question

我在Bootstrap 3.3.5設置中有一些無線電按鈕。如果檢查某個單選按鈕，則可以填充附加輸入字段。因此，我想把它放在那個單選按鈕附近。什麼是這樣做的好方法？無論我是將它放置在label還是li - 它總是顯示一箇中斷之前，並打破無線電的內聯顯示。

 <ul class="list-inline"> 

      <li> 
       <label class="radio-inline"> 
        <input type="radio" name="rdoInp" id="rdoInp1" value="1"> Radio 1 
       </label> 
      </li><li> 
       <label class="radio-inline"> 
        <input type="radio" name="rdoInp" id="rdoInp6" value="6"> Radio 6 
       </label> 
      </li><li> 
       <label class="radio-inline"> 
        <input type="radio" name="rdoInp" id="rdoInp7" value="7"> Radio 7 
        <input type="text" name="txt1" class="form-control col-xs-1"> 
       </label> 
      </li><li> 
       <label class="radio-inline"> 
        <input type="radio" name="rdoInp" id="rdoInp8" value="8"> Radio 8 
       </label> 
      </li> 

     </ul> 

與回答問題add text input to inline radio buttons我在一個.form-horizontal公式推。

小提琴：http://www.bootply.com/F57p30Eyo2

Answer 1

這看起來像你如何設置網格系統上的容器，而不是列表中的一個問題。你在包含div上有「col-sm-4」。如果您將其更改爲「col-sm-12」，它將內嵌顯示文本輸入字段。

該元素根本不適合與所有其他元素內聯，作爲這樣一個窄列的一部分。例如，將「width：50px」應用於文本字段也會將其放在內聯中。