Question

我根据浏览器尺寸创建了一个折叠的导航栏。我似乎无法阻止导航栏堆叠，当浏览器尺寸减小时，图标会在导航栏品牌下面。我想让它显示在导航栏的右侧，而不是在品牌下面。

<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top navbar-custom" id="mainNav">
    <a class="navbar-brand" href="#home">
        <img class="logo" src="img/unicornActive.png" onmouseover="hover(this);" onmouseout="unhover(this);" alt="logo">
    </a>

    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

</button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#work" data-toggle="tab">Work</a></li>
            <li class="nav-item"><a class="nav-link" href="#technique" data-toggle="tab">Technique</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
        </ul>
    </div>
</nav>

任何帮助都会非常感激！我试过把它漂浮起来，它似乎没有用。

Answer 1

您使用的是哪个版本的bootstrap和jquery？我在jsfiddle上使用最新版本的bootstrap框架创建了一个实例，但我没有得到你的问题。

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

JSFiddler

获取＆＃39;汉堡图标＆＃39;漂浮在导航栏，Bootstrap 4

1 个答案: