Question

我正在使用Bootstrap Studio构建旅游网站 - ＆gt; http://stackoverflowquestion.bss.design/

到目前为止一切顺利，除了一个问题：当缩小屏幕尺寸时，虽然徽标的尺寸确实减小，但它会占用整个导航栏并按下汉堡菜单。

现在，我的初衷是删除img-responsive并在CSS中手动输入@media个查询，以便图像适合每种屏幕类型。但是，我非常确定这不是解决问题的最佳或最有效的方法。

这是我的导航HTML：

<nav class="navbar navbar-default navbar-fixed-top navbar-fixed-top transparent">
<div class="container-fluid">
    <div class="navbar-header">
        <a href="index.html" class="navbar-brand navbar-link" id="logo-link"><img src="Logo_SmallCompass.png" height="100px" class="img-responsive" id="logo" /></a>
        <button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="collapse navbar-collapse" id="navcol-1">
        <ul class="nav navbar-nav navbar-right" id="right-links">
            <li role="presentation"><a href="safaris.html" class="text-lowercase">hello </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">test </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">bye </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">about </a></li>
            <li role="presentation"><a href="#" class="text-lowercase">Contact </a></li>
        </ul>
    </div>
</div>

非常感谢任何帮助或建议！

非常感谢提前

Answer 1

只需添加1个媒体查询：

@media (max-width: 600px) {
    a.navbar-brand.navbar-link {
        width: 80%;
    }
}

这将确保汉堡包留在右上角。

使用Bootstrap在导航栏上缩小响应式徽标图像的问题

1 个答案: