Блог

Главная - Вопросы по программированию - Выравнивание элементов по определенному размеру не работает

Выравнивание элементов по определенному размеру не работает

#css #twitter-bootstrap

#css #twitter-bootstrap

Вопрос:

Я использую bootstrap для своего макета.

 <div class="container-fluid footer">
    <div class="row p-4">
        <div class="col-lg-3 d-flex flex-column  justify-content-center align-items-md-center">
            <h3>Company</h3>
            <div class="mt-3 text-left">
                <div class="box">
                    <p class="link-router" routerLink="/careers">Careers</p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/about-us"><a>About</a></p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/contact-us">Contract us</p>
                </div>
            </div>
        </div>
    </div>
</div>

Вот, например, один столбец в моей строке.Содержимое этого столбца должно быть слева (по умолчанию)
и центрируется по вертикали, поэтому для этого я использовал

 d-flex flex-column  justify-content-center

но теперь на небольших устройствах я хочу, чтобы содержимое было в центре, а не слева.

Так что попробовал с классом

 align-items-md-center

чтобы указать, что содержимое должно быть посередине на устройствах > 768 пикселей.Но тогда все время содержимое находится посередине не только на md-устройствах.

Как я должен это сделать?

Ответ №1:

Вам нужно использовать. align-items-center align-items-md-start У вас есть центрирование по умолчанию, и вы сбрасываете центр на md ( > 768px )

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
    <div class="row p-4">
        <div class="col-lg-3 d-flex flex-column  justify-content-center align-items-center align-items-md-start">
            <h3>Company</h3>
            <div class="mt-3 text-left">
                <div class="box">
                    <p class="link-router" routerLink="/careers">Careers</p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/about-us"><a>About</a></p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/contact-us">Contract us</p>
                </div>
            </div>
        </div>
    </div>
</div>
Метки: