与引导程序，水平单选按钮和标签反应

Question

我有一个反应组件，我想在水平线上显示一些labels和radio buttons。我无法使html和bootstrap正常工作。这是正在发生的事情的图像。

这就是我的TIMESCALE组件的样子。

    render() {
    return (
            <div className="container">
              <form>
                <label className="radio-inline">
                  <input type="radio" name="time-scale" />D
                </label>
                <label className="radio-inline">
                  <input type="radio" name="time-scale" />W
                </label>
                <label className="radio-inline">
                  <input type="radio" name="time-scale" />M
                </label>
                <label className="radio-inline">
                  <input type="radio" name="time-scale" />Q
                </label>
                <label className="radio-inline">
                  <input type="radio" name="time-scale" />Y
                </label>
              </form>
            </div>
           );
        }  

这是parent容器

  render() {
    return (
            <div className="container-fluid gantt-toolbar fill">
                <div className="row">
                    <div className="col-sm-1">
                       <button type="button" className="btn btn-success" id="gantt-save-btn">Save</button>
                    </div>
                    <div className="col-sm-3">
                       <TimeLineScale />
                    </div>   
                     <div className="col-sm-1">
                       <InfoPanel />
                    </div>
                    <div className="col-sm-1">
                       <GanttFilter />
                    </div>
                </div>
                <div className="fill">
                    <div id="gantt_here" className="container-fluid" style={{height: 800}}></div>
                </div>
            </div>
  );
}