Bootstrap nav collapse ссылки, занимающие ширину экрана

Question

Когда мой nav разрушается, ссылки занимают всю ширину экрана. Как я могу сделать это только ширину текста внутри? Я пробовал настроить таргетинг на ul и li css без везения и не знаю, как подойти к этому. Любые предложения о том, какой стиль исправит это?

<div class="collapse navbar-collapse pull-right" id="nav-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#intro">About</a></li> 
       <li><a href="#exp">Experience</a></li> 
       <li><a href="#skl">Skills</a></li> 
       <li><a href="#img-port">Graphic</a></li> 
       <li><a href="#vid-port">Video</a></li> 
       <li><a href="#contact">Contact</a></li>    
      </ul> 
      </div> 

Answer 1

Вы могли бы использовать что-то вроде этого:

#nav-collapse > .nav > li { 
    display: inline-block; 
}