为什么我的 bootstrap 导航栏样式在转到移动网站时丢失了

Question

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

谢谢

卡比尔

Answer 1

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

为什么我的 bootstrap 导航栏样式在转到移动网站时丢失了

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

html

css

php

navbar

twitter-bootstrap