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

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;
}