Изменение выравнивания для ссылок с помощью bootstrap scrollyspy

#html #css #bootstrap-5

Вопрос:

Я изо всех сил пытаюсь оправдать ссылки на прокрутку в центре навигационной панели. Может кто-нибудь, пожалуйста, помочь? Спасибо!

 <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
 

Выравнивания на этом сайте обалденные, но на VSC они нормальные.

Вот мой css:

 .nav-pills {
    display: flex;
    align-content: center;
    justify-items: center;
}
 

Я попробовал использовать гибкий подход.

Спасибо за помощь.

Ответ №1:

Сделайте ширину ul элемента 100% . Если это не так, он не может центрироваться по своей ширине

Комментарии:

1. хотя также может быть другой ширины

2. Единственная мысль заключается в том, что мне нужно, чтобы он реагировал на различные типы устройств. Есть ли какой-нибудь способ сделать это, но при этом изменить ширину?

3. Используйте @media query для изменения ширины в зависимости от размера экрана.