Question

调整屏幕分辨率时，用于引导程序的右上方固定导航栏位于徽标下方。我在https://www.imageupload.co.uk/image/5bDD

上传了图片

<nav class="navbar  navbar-fixed-top navbar-inverse" role="navigation" style="border:0; border-radius:0;">
                <div class="navbar-header">
                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" style="padding:2px;" href="index.php"><img src="img/searchimage.png" width="51" height="45" /> </a>
                </div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="index.php" style="padding:10px 8px 12px 8px;"><i class="fa fa-home fa-2x"></i></a>
                        </li>
                        <li>
                            <a href="aboutus.php">AboutUs</a>
                        </li>
...
...
...
              </ul>
                </div>

            </nav>

请让我知道如何解决这个问题......

谢谢

Answer 1

当屏幕较小时，您需要使用媒体查询指定较小的字体大小。像这样：

@media (max-width: 900px)    {
    .navbar-inverse li a   {
        fonts size: 10px;
    }
}

900px和10px是出于示例目的，因此您必须检查哪个宽度和字体大小将解决布局问题。

此外，删除列表项的内联样式填充，因为对齐链接不是必需的

浏览器在引导程序上调整大小时，导航栏位于徽标下方

1 个答案: