Как изменить ширину меню начальной загрузки?

Question

Как изменить ширину меню начальной загрузки, не влияя на отзывчивость? Вот мой HTML:

<div class="page-header col-xs-12"> 
     <h2>Heading</h2> 
    </div> 
    <div class="container col-xs-12"> 
     <div class="row navigation-row"> 
      <div class="col-xs-2"></div> 
      <div class="col-xs-8"> 
       <nav class="navbar navbar-default" style="background:none;border:0px;"> 
        <div class="container-fluid"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li class="dropdown"> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 
            <span class="caret"></span> 
           </a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Page 1-1</a></li> 
            <li><a href="#">Page 1-2</a></li> 
            <li><a href="#">Page 1-3</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Page 2</a></li> 
          <li><a href="#">Page 3</a></li> 
         </ul> 
        </div> 
       </nav> 
      </div> 
      <div class="col-xs-2"></div> 
     </div> 
</div> 

Ниже мой CSS:

@charset "utf-8"; 

    .page-header { 
     background-color:#DDEFE6 !important; 
     height:150px; 
     margin:0px auto; 
    } 
    .navigation-row{ 
     background-color:#009547; 
     padding:0px; 
     height:50px; 
    } 

Как можно изменить ширину меню 'Home'?

Answer 1

Вы могли бы попытаться увеличить отступы между вашими NavBar элементами таким образом они показывают futher друг от друга и, таким образом, по-видимому, имеют большую ширину, используя следующий CSS:

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

Adjust, как вы хотите.

Answer 2

Как Джеймс упомянуто, если вы предоставите padding-left и padding-right, он должен работать нормально, но его еще лучше, если вы даете эти отступы к <a> элементов внутри <li>, а не только <li>. вот так.

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

Причина: Это затронет ссылки меню даже с любыми динамическими классами прикрепленными как active.