Html 使用bootstrap 4在小屏幕视图中对齐切换按钮(humberger图标)
我是bootstrap新手,我需要使用Bootstrap4来创建一个完全响应的菜单。主导航应该使用引导折叠导航栏在较小的屏幕宽度上显示汉堡图标。我从w3中找到了一个简单的代码,它在右侧为我提供了一个菜单,当我调整到小视图时,harmber图标(切换视图)出现在右侧:Html 使用bootstrap 4在小屏幕视图中对齐切换按钮(humberger图标),html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我是bootstrap新手,我需要使用Bootstrap4来创建一个完全响应的菜单。主导航应该使用引导折叠导航栏在较小的屏幕宽度上显示汉堡图标。我从w3中找到了一个简单的代码,它在右侧为我提供了一个菜单,当我调整到小视图时,harmber图标(切换视图)出现在右侧: <!DOCTYPE html> <html lang="en"> <!-- head includes title of page, meta data and Style links --> &
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
主页
-
-
-
如果我在切换按钮之前移除虚拟的
,然后在小屏幕视图中,切换按钮将跳到左侧而不是右侧
在不使用虚拟hacky div的情况下,将切换按钮的对齐设置为向右而不是向左的正确方法是什么
<div class="navbar-brand"></div>
谢谢你的帮助。试试这个
这里我已经应用了justify content:flex end!重要的代码>导航栏的css规则
.navbar{
证明内容:柔性端!重要;
}
主页
-
-
-
你有密码笔还是小提琴?我已经申请了内容:flex end!重要的;导航栏的css规则。试试下面我的答案好吗!,这是我的荣幸:D