在我的网站顶部,我包含一个标准的、固定的引导导航栏,并且没有在引导程序默认值之上添加任何其他 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。