Почему я не могу отобразить rc-слайдер и его метка отображается в одной строке?

Question

Мне нужно добавить метку к ползунку rc в той же строке, и я использовал загрузочную сетку, но метка и ползунок отображаются в двух строках.

 <div className="row">
      <div className="col">
          Label:
      </div>
      <div className="col">
      <Slider value={this.props.sample} 
          onChange={this.onSliderChange} 
          onAfterChange={this.onAfterChange}
          defaultValue={13}
      />
  </div>

Answer 1

У вас, должно быть, проблема с включением начальной загрузки, проверьте, загружается ли ваш код начальной загрузки на вкладку сети devtools.После подтверждения измените className класса столбцов в начальной загрузке.как ниже.Это должно работать для вас.

<div className="row">
  <div className="col-lg-1">
    Label
  </div>
  <div className="col-lg-11">
    <Slider
      value={10}
      onChange={this.onSliderChange}
      onAfterChange={this.onAfterChange}
    />
  </div>
</div>

Answer 2

Вам необходимо поместить строку в элемент div с классом container.

<div class="container">
  <div className="row">
    <div className="col">
      Label:
    </div>
    <div className="col">
      <Slider value={this.props.sample} onChange={this.onSliderChange} onAfterChange={this.onAfterChange} defaultValue={13} />
    </div>
  </div>
</div>

Дополнительная информация в документации по сетке: https://getbootstrap.com/docs/4.1/layout/grid/