Question

我目前正在实施一个范围滑块，并且在滑块的开头有一个标签，位于滑块正上方。此标签代表比例的低端。现在我需要在滑块末端的相同位置添加一个标签，以表示刻度的最高端。但是，我只能将标签显示在刻度的开头但在下面。我正在使用Bootstrap for CSS。

<div class="container">
      <label for="agitated">Agitated</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="happy">Happy</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="tired">Tired</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="scared">Scared</label>
      <input type="range" min="0" max="10" value="5" id="fader">
    </div>

Answer 1

<label for="happy" class="pull-left">Happy</label>
<label for="" class="pull-right">Sad</label>
<input type="range" min="0" max="10" value="5" id="fader">
</br>

这样的东西？如果是这些点，只需为每个标签使用引导类pull-left和pull-right。

以下是示例：

http://jsbin.com/ziluwuv/1/edit?output

Answer 2

对于任何想知道@Denisx给出的答案为什么不能与Bootstrap 4.0一起使用的人来说，请直说。使用float-left和float-right而不是pull-left和pull-right。

将标签添加到HTML范围滑块的末尾

2 个答案: