Javascript 水平显示JSON数据卡

我是新手，我正在获取一些json数据，我想在引导卡中水平显示它们，每当我尝试时，它总是垂直显示。下面是我的代码

<div className="row"  >
<div className="col-md-4" >
<div className="card" >
             <img className="card-img-top" src={user.picture.large? ( user.picture.large) : ("http://appalachiantrail.org/images/default-source/default-album/trailfocus.jpg?sfvrsn=2")} />
               <div className="card-body" >
                 <h1 className="card-title">{user.name.first}</h1>
                   <h2 className="card-text">{user.id.value} </h2>
                     <h4 className="card-text">{user.email} </h4>
                     </div>
<br>
                     </br>

   </div>
</div>

这就是我想要实现的目标

看看我想要实现什么，如何用动态json响应数据替换这些静态列？请告知

---

谢谢

您应该将它们放在带有display:flex样式的容器中

---

这个问题不是关于获取数据或成功显示数据，而是关于水平对齐您的卡，这只是CSS相关的

这可能是因为引导风格，但如果你有这样的容器

<div className="card-container">
    <Card>...</Card>
    <Card>...</Card>
    ...
</div>

---

所有东西都应水平显示：灵活

这个问题不够具体

ReactJS的要点是以活动状态提供数据。使用Javascript显示并与用户交互。 在您的情况下，您需要将示例中的显示组件提取到React.Component中，并利用XHRAJAX请求（可能使用ext library axios）

搜索以下示例：

---

你必须像fetch/promise一样进行smonething，或者axios是一个用于json请求的npm包。getusers{this.setState{loading:true}axios'.thenresponse=>this.setState{users:[…this.state.users，…response.data.results]，loading:false}；}

<div className="card-container">
    <Card>...</Card>
    <Card>...</Card>
    ...
</div>

.card-container {
    display: flex;
    ...
}

.card {
    flex: 0 0 25%; (or however you want to size)
    ...
}