我在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>

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