Twitter bootstrap 如何正确显示带文本的引导范围？

我想显示4个命名选项

       <div class="form-group">
        <label for="customRange2">Make your choice</label>
        <input type="range" class="custom-range" min="1" max="4" id="customRange2" value="1">
        <div class="container">
          <div class="row">
            <div class="col-sm text-left">
              option 1
            </div>
            <div class="col-sm text-center">
              option #2 
            </div>
            <div class="col-sm text-center">
              option ##3
            </div>
            <div class="col-sm text-right">
              option with text
            </div>
          </div>
        </div>
      </div>

做出你的选择
选择1
选项2
选项3
带文本的选项

但是文本没有很好地对齐（请参阅）。

---

如何修复它？

可以说，了解引导最难的事情是认识到应该停止使用它的类并编写自己的类：

.la包装器{
背景#f8f9fa；
边缘顶部：15px；
填充顶部：15px；
}
洛杉矶{
高度：1.5雷姆；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
填充：15px.5rem；
位置：相对位置；
}
拉斯潘先生{
位置：绝对位置；
转化：translateX（-50%）；
顶部：-.5rem；
宽度：25%；
文本对齐：居中；
}
@介质（最大宽度：768px）{
洛杉矶{
高度：3雷姆；
}
}
@介质（最大宽度：576px）{
洛杉矶{
显示：无；
}
}

做出你的选择
选择1
选项2
选项3
带文本的选项