将2个组件放在同一行

Question

在这个组件中，我在顶部有一个图像，然后在底部有两个其他组件（在 内部），它们显示为不同的行。我想把另外两个项目（一个网格和一个图表）放在单行中，我已经尝试过使用flex direction，但它似乎对我不起作用。这可能是因为我已经在父组件中使用了flex-direction:column；。

    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
    <div className="heading">
    Heading Text
    </div>
    <span> The he text goes here. </span>
  <div className="regressionSetup">
    <ItemsContainer/>
    </div>
      </main>

.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.popup{
    padding-bottom: 20px;
}

.charts{
    align-self: center;
    height: 350px;
    width: 800px;
}

.heading{
    font-size: 25px;

}

.regressionSetup{
    flex-direction: row;
}

ItemsContainer：

        return(
            <div className="container-fluid pt-4">
                <div className="row justify-content-center">
                    <div className="col-12 col-sm-12 col-md-12 col-lg-4 ">
                        <PointDrawer addCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)}/>
                        <RegressionSetup
  order_graph_1={this.state.order_graph_1}
  order_graph_2={this.state.order_graph_2}
  setOrders={(orders: any) => this.setState(orders)}
/>
                    </div>
                    <div className="col-12 col-sm-12 col-md-12 col-lg-8">
                        <Graph x={this.state.x_array} y={this.state.y_array} deg={this.state.order_graph_1} width={800} color={this.color_graph_1} />
                    </div>
                </div>
            </div>
            
        );

我如何修复这一点，使网格出现在左边，图表出现在右边，但在同一行/行？

下面是ItemContainer内部两个主要子组件的代码

PointDrawer：

    return(
            <div>
                <div className="row mb-4">
                    <div className="col-6 d-flex justify-content-center">
                        {/* <div>
                        <p>Hover Mode: [{this.state.hoverMode?"ON":"OFF"}]</p>
                        <div className="w-100 d-flex justify-content-center">
                            <button type="button" className="btn btn-success" onClick={this.toggleHoverMode.bind(this)}>toggle</button>
                        </div>
                        </div> */}
                    </div>
                    <div className="col-6 d-flex justify-content-center">
                        <div className="buttonContainer">
                        <div className="w-100 d-flex justify-content-center">
                            <Button variant="contained" color="primary" onClick={this.props.resetCoords}>reset</Button>
                        </div>
                        </div>  
                        <br />
                    </div>
                </div>
                <div className="d-flex justify-content-center">
                    <div  onMouseMove={(e)=>this.onMouseMove(e)}  
                        style={{width:this.width,height:this.height,backgroundColor:"rgba(100,100,100,0.1)",backgroundImage:`url(${grid})`}}
                        onClick={this.addCoord.bind(this)}/>
                </div>
                <div className="row mt-2">
                    <div className="col-6 d-flex justify-content-center">
                        <p>X: {this.state.x}</p>
                    </div>
                    <div className="col-6 d-flex justify-content-center">
                        <p>Y: {this.state.y}</p>
                    </div>
                </div>  
                
            </div>
        );

Graph

    return (
        <div className="w-100 d-flex justify-content-center">
            <div className="h-auto" style={{ width: this.props.width }}>
                <canvas ref={this.chartRef} />
            </div>
        </div>
    );

Answer 1

看起来像是在使用引导程序。因此，列类表示在每行可能的12列中，您希望使用的列数。所以，如果你想要两个等宽的列，你可以使用.col-6。

代码类似于itemcontainer:

<div className="container-fluid pt-4">
    <div className="row justify-content-center">
        <div className="col-6">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
        </div>
        <div className="col-6">
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
        </div>
    </div>
</div>