html - 移动尺寸的 Bootstrap 导航菜单项全宽不起作用？

Question

我有导航栏菜单，它在所有屏幕上都能正常工作，除非当它转向移动设备时，它的元素没有全宽。 [在此处输入图片描述][1]

这是图像:[1]:http://i.stack.imgur.com/0cvWo.png

    <nav id="navigationSec" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navCollapse">
    <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
    </button>

    <a href="#top" class="navbar-brand">waterbrain</a>
    </div >
     <div id="navCollapse" class="navbar-collapse collapse">
      <ul class="nav navbar-nav pull-right text-center ">
        <li><a href="#aboutSec">Me</a><li>
        <li><a href="#portfolioSec">Portfolio</a><li>
        <li><a href="#skillSec">Skills</a><li>
        <li><a href="#contactSec">Contact</a><li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

使用 navbar-right 而不是 pull-right。

试试这个

HTML:

<ul class="nav navbar-nav navbar-right text-center ">
    <li><a href="#aboutSec">Me</a><li>
    <li><a href="#portfolioSec">Portfolio</a><li>
    <li><a href="#skillSec">Skills</a><li>
    <li><a href="#contactSec">Contact</a><li>
</ul>