下面的代码用于在引导4中创建一个带有购物车图标的导航栏,如下图所示。在展开状态下,购物车显示在搜索部分的右侧。在移动设备的折叠状态下,它应该与切换开关的左侧对齐。
在当前状态下,购物车图标和切换开关之间有很长的间隙,如下图所示。
我想实现这个目标。
完整代码如下:
<!文档类型HTML>
<html lang=“en”>
&头;
&!--必需的元标记-->
<meta charset=“utf-8”>
<meta name=“viewport”content=“width=device width,initial scale=1,shrink to fit=no”>
<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/font-awome/4.7.0/css/font-awome.min.css”>
&!--引导CSS-->
<link rel=“stylesheet”href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”integrity=“sha384-gn5384xqq1aowxa+058rxpg6fy4iwvtnh0e263xmfcjlsawiggfaw/dais6jxm”crossorigin=“anonymous”>
<title>你好,世界!&标题;
和/头& GT;
和身体;
<nav class=“navbar navbar expand lg navbar light bg light pr-lg-4”>
<A class=“navbar brand”href=“”>导航栏</A>
<a href=“”class=“moving cart”><i class=“fa fa shopping cart”style=“font-size:24px;margin-left:5px;”aria hidden=“true”></i>/lt;/a>
<button class=“navbar toggler”type=“button”data toggle=“collapse”data target=“navbartogglerdemo02”aria controls=“navbartogglerdemo02”aria expanded=“false”aria label=“toggle navigation”>
<span class=“navbar toggler icon”></span>
&按钮/按钮;
<div class=“collapse navbar collapse”id=“navbartogglerdemo02”>
<ul class=“navbar nav mr auto mt-2 mt-lg-0”>
<li class=“nav item active”>
<a class=“nav link”href=“”>主页<span class=“sr only”>(当前)</span></a>
&L./L>
<li class=“nav item”>
<A class=“nav link”href=“”>链接</A>
&L./L>
<li class=“nav item”>
<A class=“nav link disabled”href=“”>已禁用</A>
&L./L>
&L/UL & GT;
<form class=“form inline my-2 my-lg-0”>
<input class=“form control mr-sm-2”type=“search”placeholder=“search”>
<button class=“btn btn outline success my-2 my-sm-0”type=“submit”>搜索</button>
&表格/表格;
&L/DIV & GT;
&;
&!--可选的javascript-->
&!--首先是jquery,然后是popper.js,然后是bootstrap js-->
<script src=“https://code.jquery.com/jquery-3.2.1.slim.min.js”integrity=“sha384-kj3o2dktikvyik3uenzmm7kkrr/re9/qpg6aazgjwfdmvna/gpgf93hxpg5kkn”crossorigin=“anonymous”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”integrity=“sha384-apnbgh9b+y1qktv3rn7w3mgpxhu9k/scqsap7huibx39j7fakffpskvxusvfa0b4q”crossorigin=“anonymous”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”integrity=“sha384-jzr6spejh4u02d8jot6vlehfe/jqgirrsqxsfwpi1mquvdayjuar5+76pvcmyl”crossorigin=“anonymous”></script>
和/身体;
& lt//html & gt;
< /代码>
这是CSS
媒体(最小宽度:992px){
移动手推车{
位置:绝对;
权利要求:0;
}
}
@仅限媒体屏幕和(最大宽度:990px){
移动手推车{
保证金权:0;
}
}
< /代码>
现场演示
https://codepen.io/kofhearts/pen/yjqznm?编辑=1100
我感谢你的帮助。谢谢!
在当前状态下,购物车图标和切换开关之间有很长的间隙,如下图所示。
我想实现这个目标。
完整代码如下:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light pr-lg-4">
<a class="navbar-brand" href="#">Navbar</a>
<a href="#" class="moving-cart"><i class="fa fa-shopping-cart" style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
这里是CSS
@media (min-width: 992px) {
.moving-cart {
position: absolute;
right: 0;
}
}
@media only screen and (max-width: 990px) {
.moving-cart {
margin-right:0;
}
}
现场演示
https://codepen.io/kofhearts/pen/YjQZNM?editors=1100
我感谢你的帮助。谢谢!
