如何将 MDBootstrap 卡排成一行？答案

【问题标题】：How to grid MDBootstrap cards in one row?如何将 MDBootstrap 卡排成一行？
【发布时间】：2020-04-08 13:00:31
【问题描述】：

我在我的 React 项目中使用了 MDBootstrap 卡。我发现很难在一行中对齐。对齐 3 张卡片是预期的，但是卡片仅卡在垂直位置。请参阅下面的代码以供参考。

<MDBContainer>
      <MDBRow >      
      <MDBCol >
      <MDBCard style={{ width: "18rem", borderRadius:'10px'}} >
      { 
        data.map((data, index) => {
          return <div key={index}>
          <MDBCardImage className="img-fluid" src={data.img}
          waves style={{borderRadius:'10px'}} 
          style={{height:'350px', width:'310px'}} />
          <MDBCardBody>
            <MDBCardTitle style={{color:'black'}}>{data.title}</MDBCardTitle>
            <hr/>
            <MDBCardText>
            {data.content}
            </MDBCardText>
            <MDBBtn href="#">Github</MDBBtn>
            <MDBBtn href="#">Live Demo</MDBBtn>
          </MDBCardBody>
          <br/>
          </div> 
        })
      }  
      </MDBCard>
    </MDBCol>
  </MDBRow>
</MDBContainer>

下面是图片。这就是我得到的最终结果。有什么解决办法吗？

【问题讨论】：

嗨，Pranav，检查我的解决方案，如果有帮助，请告诉我。

标签： reactjs bootstrap-4 mdbootstrap

【解决方案1】：

您在行内只有 1 列，并且仅在列内迭代数据，这会导致单列堆叠格式。您的迭代应返回单独的列，例如：

<MDBRow>
    {
    data.map((data, index) => {
    return <MDBCol key={index}>
        <MDBCard style={{ width: "18rem", borderRadius:'10px'}}>
            <MDBCardImage className="img-fluid" src={data.img} waves style={{borderRadius:'10px'}} style={{height:'350px', width:'310px'}} />
            <MDBCardBody>
                <MDBCardTitle style={{color:'black'}}>{data.title}</MDBCardTitle>
                <hr />
                <MDBCardText>
                    {data.content}
                </MDBCardText>
                <MDBBtn href="#">Github</MDBBtn>
                <MDBBtn href="#">Live Demo</MDBBtn>
            </MDBCardBody>
        </MDBCard>
    </MDBCol>
    })
    }
</MDBRow>

【讨论】：