bootstrap 4 导航在调整大小时不显示汉堡包 [英] bootstrap 4 nav doesn't display hamburger on resize

问题描述

我已经想出了如何将菜单项向右对齐，但是当调整大小时，导航栏切换器没有出现.

代码:

<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">灵北咨询</span></a><button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarFullCollapse" ><span class="navbar-toggler-icon"></span><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>

</nav>

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

提前致谢！

解决方案

2018 年更新

汉堡在那里，但它不可见，因为导航栏需要颜色，或者 更改切换器颜色.

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

• 使用 navbar-dark 生成浅色/白色链接和切换器
• 使用 navbar-light 生成深/灰色链接和切换器

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

..</nav>

<小时>

另见:Bootstrap 导航栏:在较小的屏幕上不显示任何内容设备

I've figured how to align the menu items to the right, but when resized the navbar-toggler doesnt appear.

Code:

<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>

Please see http://core.lundbeckconsulting.no for demo

thanks in advance!

解决方案

Updated 2018

The hamburger is there, but it's not visible because the Navbar needs a color, or change the toggler color.

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

• Use navbar-dark to produce light/white colored links and toggler
• Use navbar-light to produce dark/gray colored links and toggler

In Bootstrap 4.0.0 navbar-toggleable- has changed to navbar-expand-, but navbar-light and navbar-dark still work the same way...

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

---

also see: Bootstrap navbar: nothing is displayed on smaller devices

这篇关于bootstrap 4 导航在调整大小时不显示汉堡包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！