【问题标题】:bootstrap 4 nav doesn't display hamburger on resizebootstrap 4 nav 在调整大小时不显示汉堡包
【发布时间】:2017-07-16 19:15:47
【问题描述】:

我已经想出了如何将菜单项向右对齐,但是当调整大小时,导航栏切换器不会出现。

代码:

<nav class="navbar navbar-toggleable-md">
    <a asp-controller="Home" asp-action="Index" class="navbar-brand">
        <img class="brand_img" src="/Graphic/logo.jpg" style="margin-left:-1px;margin-right:6px;" />
        <span class="brand_name">Lundbeck Consulting</span>
    </a>
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarFullCollapse" >
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarFullCollapse">
        <div class="nav navbar-nav">
            <a class="nav-item nav-link navbar_item" asp-controller="Home" asp-action="About">Om LC</a>
            <a class="nav-item nav-link navbar_item" asp-controller="Project" asp-action="Index">Prosjekter</a>
            <a class="nav-item nav-link navbar_item" asp-controller="Home" asp-action="Contact">Kontakt</a>
        </div>
    </div>
</nav>

请参阅http://core.lundbeckconsulting.no 进行演示

提前致谢!

【问题讨论】:

    标签: twitter-bootstrap bootstrap-4


    【解决方案1】:

    2022 年更新

    Bootstrap 5导航栏还需要navbar-lightnavbar-dark 在导航栏切换到移动模式时显示汉堡包。

    2018 年更新

    汉堡包在那里,但它不可见,因为导航栏需要颜色,或者change the toggler color

    <nav class="navbar navbar-toggleable-md bg-faded navbar-light">
        ..
    </nav>
    
    • 使用navbar-dark 生成浅色/白色链接和切换器
    • 使用navbar-light 生成深/灰色链接和切换器

    Bootstrap 4.0.0 中,navbar-toggleable- 已更改为 navbar-expand-,但 navbar-lightnavbar-dark 仍然以相同的方式工作...

    <nav class="navbar navbar-expand-md navbar-light bg-light">
        ..
    </nav>
    

    另见:Bootstrap navbar: nothing is displayed on smaller devices

    【讨论】:

      【解决方案2】:

      代码很好,但是我会在打开标签后保留文档并替换按钮,因为它可能有一些与 js 加载有关的东西。

      编辑:我再次检查了您的网站并找到了右上角的按钮!现在你所要做的就是改变它的颜色和位置。使用 google chrome 开发工具 (f12) 并在调整窗口大小时搜索它。

      【讨论】:

      • 感谢您查看我的代码。现在我终于可以找到按钮了。但我认为 navbar-toggler-icon 会渲染著名的汉堡包。如何更改颜色?我尝试了颜色:黑色,但没有做任何事情..
      • Bootstrap 4 不再使用 char 而是使用图像作为图标。您可能想尝试更改背景颜色和边框颜色。
      • 我可以改变背景和边框,但是对中间的三行没有影响。也许只使用自定义图像更容易..?
      • 当我添加 navbar-light(出于某种原因)时,该图标变得可见。感谢您花时间提供帮助:)
      • 导航栏覆盖背景颜色的浅色主题;)
      猜你喜欢
      • 1970-01-01
      • 2017-05-24
      • 1970-01-01
      • 2020-08-06
      • 2020-01-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多