Twitter的引導 - 追加數字步進直列旁邊的輸入字段

Question

我試圖實現代碼：

https://dl.dropboxusercontent.com/u/233981/Numerical_slider.PNG

經過一番研究，我發現http://loopj.com/jquery-simple-slider/這似乎是一個很好的開始。

到目前爲止，我有：

<div class="control-group"> 
<label class="control-label">Label 1</label> 
    <div class="controls">  
    <input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume"> 
    </div> 
</div> 

這滑塊工作正常，但現在我試圖把滑塊旁邊的一個數字步進。因此：

<input type="number" class="input-mini" value="60"> 

我一直在擺弄與input-append和help-inline試圖讓數字步進很好地滑塊旁邊坐下，但它只是不飛。我不斷得到滑塊下方顯示的<input type="number">字段的一些變化，而不是旁邊的變化。

如何將數字輸入字段移動到滑塊的右側？

Answer 1

隨着下面的CSS（slidernumber是分配給輸入字段的類）：

.slidernumber 
{ 
    float: left; 
} 
.slider-volume { 
    margin-top: 5px; 
    float: left; 
} 

的兩個小部件然後是側利用此HTML側：

<div class="control-group"> 
    <label class="control-label">Label 1</label> 
    <div class="controls smallgroup">  
     <input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume"/> 
     <input type="number" class="input-mini slidernumber" value="60"/> 
    </div> 
</div> 

Fiddle here。