Как правильно отобразить диапазон bootstrap с текстами?

Question

Я хотел бы отобразить диапазон начальной загрузки с четырьмя именованными опциями

       <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>

Но текст не выровнен (см. https://jsfiddle.net/duwLt21z/). Как я мог это исправить?

Answer 1

Пожалуй, самое сложное, что нужно узнать о 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>