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

Question

Как создать большее пространство между каждой ссылкой на моем навигаторе, чтобы они были дальше друг от друга? Я что-то меняю 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> 

Answer 1

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

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

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

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

Answer 2

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

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

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

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