Изменение пробела между каждым элементом в Bootstrap navbar

Как я могу создать большее пространство между каждой ссылкой на моем навигаторе, чтобы они были дальше друг от друга? Я что-то меняю CSS или HTML? Вот как я реализовал свой navbar в html:

<div class="navbar-wrapper">
<div class="container">
    <div class="navbar navbar-static-top" role="navigation">
    <div class="container full-width">
    <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#"></a>
     </div>
     <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home_page">Home</a></li>
            <li><a href="#about_page">About</a></li>
            <li><a href="#portfolio_page">Portfolio</a></li>
            <li><a href="#contact_page">Contact</a></li>
        </ul>
     </div>
     </div>
     </div>
</div>
</div>

Ответ 1

Вы можете изменить это в своем CSS с помощью свойства padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Также вы можете установить margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

Ответ 2

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

Если это происходит, просто запомните использование запросов в формате CSS и укажите только поля на ширине экрана, которые могут обрабатывать его.

В соответствии с мобильным первым подходом рамки, в которой вы работаете (bootstrap), лучше добавить прописку по ширине, которая может обрабатывать ее, а не исключать ее по ширине, которая не может.

@media (min-width: 992px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
}

Ответ 3

Начиная с Bootstrap 4, вы можете использовать утилиты разнесения.

Добавьте, например, px-2 в классы nav-item, чтобы увеличить отступы.

Ответ 4

Я бы посоветовал вам просто равномерно распределить их, как показано в этом ответе здесь

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}