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

【问题标题】：Why is my bootstrap navbar styling lost when going to mobile site为什么在访问移动网站时我的引导导航栏样式丢失
【发布时间】：2015-01-16 12:45:05
【问题描述】：

在我的网站顶部，我包含了一个标准的、固定顶部的引导程序导航栏，并且没有在引导程序默认设置之上添加任何其他 CSS。即使这样，我发现当将窗口缩小到移动设备（低于 767 像素）时，样式会变得很糟糕。在按钮的顶部和底部添加了一个边距，当您变小时，右侧的 about 按钮会完全不对齐。有谁知道解决这个问题。我尝试过调整 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>

谢谢

卡比尔

【问题讨论】：

如果可能，您应该包含尽可能少的代码来重现您作为 sn-p 遇到的问题。如果您的链接消失，它可以帮助人们帮助您并保持问题的相关性。此外，您提供的唯一参考资料并未显示问题，可能被认为只是在宣传您的网站。
能否贴出相关代码
@klors 问题是除了引导默认值之外，我没有任何其他代码。我现在已经在问题中包含了导航栏的代码
我很生气和困惑，为什么我被无缘无故地否决了。有人可以解释一下我做错了什么吗？
您不能在您自己的文件中的 bootstrap.css 之后使用媒体查询覆盖导航的 CSS 吗？

标签： php html css twitter-bootstrap navbar

【解决方案1】：

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

【讨论】：