为什么我的引导程序导航栏样式在访问移动网站时丢失


Why is my bootstrap navbar styling lost when going to mobile site

在我的网站顶部,我包含一个标准的、固定的引导导航栏,并且没有在引导程序默认值之上添加任何其他 CSS。即使这样,我发现当将窗口缩小到移动设备(低于 767px)时,样式会变得很糟糕。在按钮的顶部和底部添加一个边距,当您变小时,右侧的"关于"按钮完全不对齐。有谁知道解决这个问题的方法。我尝试只是去调整 css 来解决问题,但没有成功。

下面是导航栏的代码:

    <?php 
    $pg = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
    if ($pg == "index") {
      $navbarposition = "navbar-fixed-bottom";
    } else {
      $navbarposition = "navbar-fixed-top";
    }
    echo "<body>";
    echo "<nav class='navbar navbar-default " . $navbarposition . " navbar-inverse' role='navigation'>"
    ?>
        <ul class="nav navbar-nav">
            <li id="about" <?php if($pg == 'about'){echo 'class="active"';} ?> ><a href="about.php">About</a></li>
            <li id="staff" <?php if($pg == 'staff'){echo 'class="active"';} ?> ><a href="staff.php">Staff</a></li>
            <li id="contact" <?php if($pg == 'contact'){echo 'class="active"';} ?> ><a href="contact.php">Contact</a></li>
            <li id="calendar" <?php if($pg == 'calendar'){echo 'class="active"';} ?> ><a href="calendar.php">Calendar</a></li>
        </ul>
    </nav>
    </body>

谢谢

卡比尔

终于找到了解决我问题的方法。对于将来发现此内容的任何其他人,只需从此页面下载自定义版本的引导程序:http://getbootstrap.com/customize 并将@grid-float-breakpoint变量设置为1px。