可以说，学习Bootstrap最困难的事情是认识到你应该停止使用它的类并编写自己的类：

.la-wrapper {
  background: #f8f9fa;
  margin-top: 15px;
  padding-top: 15px;
}

.la {
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px .5rem;
  position: relative;
}

.la span {
  position: absolute;
  transform: translateX(-50%);
  top: -.5rem;
  width: 25%;
  text-align: center;
}

@media (max-width: 768px) {
  .la {
    height: 3rem;
  }
}

@media (max-width: 576px) {
  .la {
    display: none;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row la-wrapper">
    <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-md-10 offset-md-1 px-0">
      <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>
      <div class="la">
        <div><span>
          option 1
        </span></div>
        <div><span>
          option #2
        </span></div>
        <div><span>
          option ##3
        </span></div>
        <div><span>
          option with text
        </span></div>
      </div>
    </div>
  </div>
</div>

Range元素现在本机支持此功能。下面的例子主要来自Mozilla文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

.custom-range-control {
  background: #f8f9fa;
  margin: 1rem;
  padding: 1rem;
  width: 400px;
}

.custom-range-control datalist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.custom-range-control option {
  padding: 0 0.5rem;
  flex: 1;
}

.custom-range-control input[type="range"],
.custom-range-control datalist{
  width:100%;
  margin: 0;
}

<div class="custom-range-control">
  <label for="custom-range">Make your choice</label>
  <br>
  <input type="range" min="1" max="4" id="custom-range" list="values" />

  <datalist id="values">
    <option value="1" label=" option 1"></option>
    <option value="2" label="option #2"></option>
    <option value="3" label="option ##3"></option>
    <option value="4" label="option with text"></option>
  </datalist>
</div>