在列弯曲方向内使用行弯曲方向

Question

在这个组件中，我在顶部有一个图像，然后在底部有其他组件，它们显示为不同的行。

    <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="popup">
  <Popup/> 
  </div >
  <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;
}

该组件还具有两个组件：一个网格和一个显示在网格下方的图表。我希望网格和图表出现在同一行。我尝试将flex-direction: row 添加到className="regressionSetup"，但没有成功。

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

如何更改此设置，使网格显示在左侧，图表显示在右侧但在同一行？

Answer 1

我想你忘了在添加flex-direction之前添加display: flex，没有它flex-direction将不起作用

Answer 2

不是.regressionSetup 会让项目出现在同一行，所以这个类不需要flex-direction。这是<div className="row justify-content-center"> 在您的ItemsContainer 中，因为那是行所在的位置。

我只能建议您的屏幕处于一个断点处，该断点的列是全宽，而不是 1/3 和 2/3，这是您的引导类中定义的大屏幕尺寸。