Блог

Главная - Вопросы по программированию - Я пытаюсь центрировать карту, но она не работает

Я пытаюсь центрировать карту, но она не работает

#reactjs #bootstrap-4

#reactjs #bootstrap-4

Вопрос:

Я создаю приложение react, в котором я пытаюсь центрировать блоки, используя justify content center, но оно не работает. Я использовал justify-content-center, center -block, но все равно он не работает

Пожалуйста, помогите мне

 function Trackers(props) {

  return (
    <>
      
      <h2 class="font-weight-bold text-center mt-4 mb-4" >COVID-19 TRACKER</h2>
      <Container>
        <Row >
        <Col xs={12} sm={12} md={4} className="center-block">
      
          <Card style={{ width: '15rem' }} className="justify-content-center text-center ml-1 mr-1 mt-1 mb-1" >
            <Card.Body>
              <h6>Infected</h6>
              <h5>{props.data["statewise"][0]["active"]}</h5>
              <br />
              <h6>No of Active Cases of Covid-19</h6>
              <Container className="bg-primary " style={{height:"5px" ,width:"auto"}} height="20px" width="auto"  >

              </Container>

            </Card.Body>
          </Card></Col>

          
          <Col xs={12}  sm={12} md={4} className="justify-content-center ">
      
          <Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1" >
            <Card.Body>
              <h6>Recovered</h6>
              <h5>{props.data["statewise"][0]["recovered"]}</h5>
              <br />
              <h6>No of Recovered Cases of Covid-19</h6>
              <Container className="bg-success " style={{height:"5px" ,width:"auto"}} height="20px" width="auto"  >

              </Container>

            </Card.Body>
          </Card></Col>
          <Col xs={12}  sm={12} md={4} className="justify-content-center ">
       
        <Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1">
            <Card.Body>
              <h6>Deaths</h6>
              <h5>{props.data["statewise"][0]["deaths"]}</h5>
              <br />
              <h6>No of Deaths Cases of Covid-19</h6>
              <Container className="bg-dark " style={{height:"5px" ,width:"auto"}} height="20px" width="auto"  >

              </Container>
 
            </Card.Body>
          </Card>
         </Col>       
        </Row>
      </Container>
    </>
  );
}

https://i.stack.imgur.com/MqKYV.png

Ответ №1:

Вам просто нужно добавить класс p-0 (нулевое заполнение) к вашему Col , а затем в вашем Card элементе заменить классы ml-1 mr-1 на just mx-auto (устанавливает поля по оси x, слева и справа на auto)

https://jsfiddle.net/85nj7tz1/

К вашему сведению .justify-content-center , используется в строке для центрирования столбцов внутри строки.

Ответ №2:

Правильный ответ у вас уже есть mx-auto . Кроме того, вы также можете ввести h-100 на картах, чтобы они были правильно выровнены на всех экранах. С помощью a .card-footer вы также можете выровнять макет границы.

ДЕМОНСТРАЦИЯ со столбцами

Чтобы продвинуться немного дальше, вы можете избавиться от столбцов и использовать макет карты. A .card-deck кажется идеальным подходом.

ДЕМОНСТРАЦИЯ с раскладкой карты

Метки: ,