Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы ссылки в навигационной панели начальной загрузки занимали место равномерно по горизонтали?

Как мне сделать так, чтобы ссылки в навигационной панели начальной загрузки занимали место равномерно по горизонтали?

#css #twitter-bootstrap #bootstrap-5

#css #twitter-bootstrap #bootstrap-5

Вопрос:

Мой код https://www.codeply.com/p/6acopedTjG

 <nav class="navbar navbar-expand-sm navbar-light sticky-top">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
      <div class="navbar-nav mx-auto navbar-justified">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Skills</a>
        <a class="nav-link" href="#">Projects</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Contact</a> 
        
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blogs</a>
      </div>
    </div>
  </div>
</nav>

.navbar{
    background-color: #e3fdfd;
}

.navbar-justified {
  display: flex;
  justify-content: space-between;
  float: none;
}

Вот как выглядит мой вывод сейчас

Я хочу, чтобы мой вывод выглядел так

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

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

1. Пожалуйста, поместите код в сам вопрос

Ответ №1:

Добавьте width: 100%; в свой класс CSS .navbar-justified

Ответ №2:

добавьте этот класс в nav ul "navbar-nav w-100 justify-content-between"

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

1. Ответы в одну строку без подробностей, относящихся к проблеме, или примера кода, не очень полезны и подвержены удалению. Постарайтесь быть более подробными в своих объяснениях.

Ответ №3:

Для этого вам не нужен дополнительный CSS. Просто используйте nav-fill и w-100 …

https://codeply.com/p/3vHSPErTIQ

 <nav class="navbar navbar-expand-sm navbar-light sticky-top">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
      <div class="navbar-nav mx-auto nav-fill w-100">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Skills</a>
        <a class="nav-link" href="#">Projects</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Contact</a> 
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blogs</a>
      </div>
    </div>
  </div>
</nav>
Метки: