自举导航折叠链接占用屏幕宽度

Question

当我的导航折叠时，链接占据屏幕的整个宽度。我怎样才能让它只是文字的宽度？我已经试过针对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; 
}