Как исправить меню с помощью бутстрапа

Question

Я использую navbar bootstrap3. Как вы можете видеть problème является:

как я могу получить «Recherche» на той же строке, не уменьшая размер шрифта

Вот мой код:

<nav class="navbar navbar-default navbar-static-top navbar-custom"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">...</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

     </div> 

     <?php $idCategorie=$this->idCategorie;?> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li <?php if($idCategorie == '5') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/5">Terminal de paiement <span class="sr-only">(current)</span></a></li> 
      <li <?php if($idCategorie == '6') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/6">Application de caisse</a></li> 
      <li <?php if($idCategorie == '7') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/7">Logiciel de gestion</a></li> 
      <li <?php if($idCategorie == '8') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/8">Opérations bancaires</a></li> 
      <li <?php if($idCategorie == '9') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/9">Equipements</a></li> 
      <?php if($acces){?> 
       <li <?php if($idCategorie == '11') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/client/index">Informations clients</a></li> 
      <?php }?> 
      <li class="<?php if($idCategorie == '10') echo 'active'; ?> coloCell1" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/10">Difficultés pour un encaissement CB</a></li> 
      <!-- <li class="<?php //if($idCategorie == '11') echo 'active'; ?> coloCell4" ><a href="<?php //echo $this->baseUrl() ?>/index/page/id/11">Informations client </a></li>--> 
      <li class="<?php if($idCategorie == 'iframe') echo 'active'; ?> coloCell2" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/iframe">Recherche</a></li> 
      </ul> 

     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container --> 
    </nav> 

Answer 1

Вы можете выбрать между этими двумя вариантами:

1. Сделать тексты в пунктах меню короче.
2. Сделайте отступ слева и справа от текста меньшим.

Но в конце есть только так много, что будет вписываться в одну строку меню.

Для варианта 2 вам нужно будет изменить файл CSS. Добавьте что-то вроде:

.navbar-inverse .navbar-nav > li > a { 
    padding: 5px 10px; 
} 

или любые его варианты, которые будут работать в вашей среде. Осмотрите стили, чтобы увидеть, что вам нужно изменить.