我正试图编码:
https://dl.dropboxusercontent.com/u/233981/Numerical_slider.PNG
经过一番研究,我发现这似乎是一个很好的开始。
到目前为止我有:

<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-appendhelp-inline试图让数字步进器坐在滑块旁边,但它只是没有飞行。我不断地得到显示在滑块下方而不是旁边的<input type="number">字段的一些变化。
如何将数字输入字段移到滑块的右侧?

最佳答案

使用以下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

关于jquery - Twitter Bootstrap-在输入字段旁边附加数字步进器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16686000/

10-11 12:04