为什么我无法渲染 rc-slider 及其标签出现在单行中？答案

【问题标题】：Why i am not able to render the rc-slider and its label appear in a single row?为什么我无法渲染 rc-slider 及其标签出现在单行中？
【发布时间】：2018-11-19 07:11:52
【问题描述】：

我需要在同一行中为 rc-slider 添加一个标签，我使用了引导网格，但标签和滑块出现在两行中。

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

【问题讨论】：

标签： html css twitter-bootstrap reactjs bootstrap-4

【解决方案1】：

您需要将该行放在具有container 类的 div 中。

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

【讨论】：

【解决方案2】：

您必须在包含引导程序时遇到问题，检查您的代码是否引导程序正在加载到您的 devtools 网络选项卡中。确认后，在引导程序中更改列类的类名。如下所示。这应该适合你。

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

【讨论】：