css - 浏览器在 Bootstrap 中调整大小时，导航栏低于 Logo

Question

调整屏幕分辨率大小时， Bootstrap 的右上角固定导航栏位于 Logo 下方。我在 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 仅供引用，因此您必须检查哪个宽度和字体大小可以解决布局问题。

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