bootstrap 4 nav在调整大小时不显示汉堡包

时间:2017-02-26 03:14:50

标签: twitter-bootstrap bootstrap-4

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

代码:

<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了解演示

提前感谢!

2 个答案:

答案 0 :(得分:3)

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的工作方式仍然相同... < / p>

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

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

答案 1 :(得分:0)

代码很好,但是我打开文档并在打开代码后立即替换按钮,因为它可能有js加载的东西。

编辑:我再次视察了您的网站,找到了右上角的按钮!现在你所要做的就是改变它的颜色和位置。

,在调整窗口大小时,使用google chrome dev工具(f12)和searh