无法使用 Bootstrap 缩小导航栏上的响应式徽标图像

Question

我正在使用 Bootstrap Studio -> http://Whosebugquestion.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 缩小导航栏上的响应式徽标图像

Trouble scaling down responsive logo image on navbar with Bootstrap

html

css

nav

twitter-bootstrap