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>

Answer 2

您必须为响应式视图添加

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobre大小的Bootstrap导航菜单项全宽不起作用？

2 个答案: