如何解决如何将div放置在导航栏的末尾?带自举4
我需要在导航栏的末尾放置一个div,在移动设备上查看时,它会与菜单的其余部分一起隐藏
我保留了html的一部分。
.navbar {
padding:0rem;
margin-bottom:2rem;
}
.nav-link
{
color: White !important;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
}
.nav-item:hover
{
background-color: White;
}
.nav-item > .nav-link:hover
{
color: #0071BA !important;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-md sticky-top" style="background-color:#0071BA;">
<a class="navbar-brand" style="width: 240px;color: White;">logo</a>
<div class="navbar-toggler-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="color: White; border-color: White;">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse flex-column " id="navbar">
<ul id="nav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
<li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
<li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
<li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
</ul>
<ul id="subnav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
<li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
<li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
<li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
</ul>
<div id="divCierra" class="pull-right navbar-toggler-right" style="background-color: white;height: 80px;vertical-align: middle;border: 1px solid #0071BA;display: flex;align-items: center;float: left;"><div id="div2" style="
background-color: white;
width: 100%;"><a ID="btnCerrar" class="CerrarCss" >Cerrar sesión<a>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
如果您注意到,注销位于两个菜单下,但是我需要它占据导航栏的整个高度并位于导航栏的末尾。
类似的东西:
在移动设备上进行查看时,注销非常麻烦,但我需要将其与菜单的其余部分合并,作为一项附加内容
解决方法
你可以那样做
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
.navbar {
padding: 0rem;
margin-bottom: 2rem;
}
.nav-link {
color: White !important;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
}
.nav-item:hover {
background-color: White;
}
.nav-item>.nav-link:hover {
color: #0071ba !important;
}
</style>
<body>
<header>
<nav class="navbar navbar-expand-md sticky-top" style="background-color: #0071ba;">
<a class="navbar-brand" style="width: 240px; color: White;">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="color: White; border-color: White;">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse flex-column" id="navbar">
<ul id="nav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
</ul>
<ul id="subnav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
<li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
</ul>
</div>
<div id="divCierra" class="pull-right navbar-toggler-right" style="background-color: white; height: 80px; vertical-align: middle; border: 1px solid #0071ba; display: flex; align-items: center; float: left;">
<div id="div2" style="background-color: white; width: 100%;"><a id="btnCerrar" class="CerrarCss">Cerrar sesión</a></div>
</div>
</nav>
</header>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。