Bootstrap汉堡菜单更改位置 [英] Bootstrap hamburger menu changing position
本文介绍了Bootstrap汉堡菜单更改位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望汉堡图标保持在右边,我在做什么错了?
I want the hamburger icon to stay to the right, what am I doing wrong?
https://jsfiddle.net/amtrbsk2/
<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg text-nowrap">
<div class="container">
<div class="row w-100 align-items-center">
<div class="col col-lg-3">
<a href="" class="navbar-brand justify-content-start">
<h1 class="display-3" id="cont">Yrkeskock<span id="se">.SE</span></h1>
</a>
</div>
<div class="col col-lg-5">
<div class="navbar-nav">
<div class="collapse navbar-collapse navbar1">
<a href="#" class="nav-item nav-link">Hem</a>
<a href="#" class="nav-item nav-link">Recept</a>
<a href="#" class="nav-item nav-link">Arbetssökande</a>
<a href="#" class="nav-item nav-link">Omdömen</a>
<a href="#" class="nav-item nav-link">Hjälpmedel</a>
</div>
</div>
</div>
<div class="col col-lg-1"></div>
<div class="col col-lg-3">
<div class="navbar-nav collapse navbar-collapse navbar1">
<a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Logga In</a>
<a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1">
</div>
</div>
</div>
</div>
<button id="hamburger" class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button></nav>
推荐答案
只需从14 line in jsfiddle
中删除类容器.
您的代码应如下所示:
<div class="">
<div class="row w-100 align-items-center">
代替:
<div class="container">
<div class="row w-100 align-items-center">
container
类由破坏导航栏的width:100%
组成.
container
class consist of width:100%
which is breaking navbar flex.
这篇关于Bootstrap汉堡菜单更改位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文