Как разместить карты MDBootstrap в один ряд?

Я использовал карты MDBootstrap в своем проекте React. Мне сложно выравнивать в одной строке. Ожидается выравнивание 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>

Ниже приведено изображение. Вот какой конечный результат я получаю. Любое решение?

введите здесь описание изображения


reactjs bootstrap-4 mdbootstrap
person Pranav    schedule 16.12.2019    source источник
comment
Привет, Пранав, проверьте мое решение и дайте мне знать, если это поможет.   -  person ravibagul91    schedule 16.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть только 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>
person ravibagul91    schedule 16.12.2019