Javascript 如何使列表在React中以适当的列和行显示

我的博客帖子列表无法以我希望的方式显示。我希望它在每行显示两行Blogpost。它正在这样做，但是我的博客列表已经变小了。我不知道我做错了什么。另一件事是，在循环浏览博客帖子之后，我正努力在一行中正确显示列表

我正在研究MERN stack。第一个图像是我想要的，但第二个图像是我得到的

  const Post = props => (
     <div>
    
        <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12" data-aos="fade- 
           right">
           <div className="col-lg-6 col-xs-12">
             <img src="https://images.pexels.com/photos/39811/pexels-photo- 
               39811.jpeg?h=350&auto=compress&cs=tinysrgb" alt="" width="100%" 
               />
        </div>
        <div className="col-lg-6 col-xs-12">
            <div className="blog-column">
                <span>{props.post.title}</span>
                <ul className="blog-detail list-inline"> 
                    <li><i className="fa fa-user" />{props.post.from}</li> 
                    <li><i className="fa fa-clock-o" />{props.post.createdAt} 
                    </li> 
                </ul> 
                <p>{props.post.description}</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </div>

</div>
 
)



  

 postList() {
     return this.state.posts.map(function(currentPost, i) {
        return <Post post={currentPost} key={i} />;
     });
  }







render() {
    return (
        <div>
            <div className="blog">
                <div className="container">
                    <div className="row">
                    <div className="col-lg-6 col-lg-offset-3 text-center">  
                            <h2><span className="ion-minus" />Blog Posts<span className="ion-minus" /></h2>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis  dis parturient montes, nascetur ridiculus </p><br />
                        </div> 
                    </div> 
                    <div className="row">
                        <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12" data-aos="fade-right">
                            {this.postList() }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

const Post=props=>(
{props.post.title}

{props.post.from}
{props.post.createdAt}


{props.post.description}

)
postList（）{
返回此.state.posts.map（函数（currentPost，i）{
返回；
});
}
render（）{
返回(
博客帖子
奥雷姆·伊普斯姆·多洛·希特·艾米特，一位杰出的献祭者。埃涅·康莫·利古拉·埃杰·多洛。埃涅·马萨。以及蒙特斯、纳赛图尔·里德库斯、纳赛图尔·里德库斯和马格尼斯·多洛（nascetur ridiculus）

{this.postList（）}
)
}

这就是我想要的：

这就是我得到的：

{this.postList（）}

如果您想要任何屏幕的全宽，需要指定“-12”代替“-6”，如本例中的col-lg-12 col-md-12 col-sm-12 col-xs-12

<div className="row">
   <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12" data-aos="fade-right">
       {this.postList() }
   </div>
</div>