我正在尝试使用引导程序4框架在侧栏中进行导航,这在小型设备的页面顶部显示。
我的方法:
.sidebar {
background-image: linear-gradient(180deg, rgb(33, 243, 96) 0%, #077710 70%);
}
.sidebar .navbar-brand {
font-size: 1.1rem;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.main {
flex: 1;
}
.main .top-row {
background-color: #e6e6e6;
border-bottom: 1px solid #d6d5d5;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item a.active {
background-color: rgba(255, 255, 255, 0.25);
color: white;
}
.nav-item a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.content {
padding-top: 1.1rem;
}
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
/* @media (max-width: 767.98px) { */
.main .top-row {
display: none;
}
/* Burger-icon animation */
.navbar-toggler {
position: relative;
}
.navbar-toggler:focus,
.navbar-toggler:active {
outline: 0;
}
.navbar-toggler span {
display: block;
background-color: #444;
height: 3px;
width: 25px;
margin-top: 4px;
margin-bottom: 4px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
position: relative;
left: 0;
opacity: 1;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
-webkit-transition: transform .35s ease-in-out;
-moz-transition: transform .35s ease-in-out;
-o-transition: transform .35s ease-in-out;
transition: transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
position: absolute;
left: 12px;
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
opacity: 0.9;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
height: 12px;
visibility: hidden;
background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
position: absolute;
left: 12px;
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
opacity: 0.9;
}
/* } */
/* @media (min-width: 768px) {
contentwrapper {
flex-direction: row;
}
.main{
position: absolute;
width: calc(100% - 250px);
margin-left: 250px;
float: right;
}
.sidebar {
width: 250px;
height: 100vh;
position: fixed;
top: 0;
overflow-y: scroll;
}
.main .top-row {
position: sticky;
top: 0;
}
.main > div {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
.navbar-toggler {
display: none;
}
.sidebar .collapse {
display: block;
}
} */
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<contentwrapper>
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">MyTestPage</a>
<button class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbarContent" aria-expanded="false" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav flex-column collapse" id="navbarContent">
<li class="nav-item">
<a class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page3
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page4
</a>
</li>
</ul>
</div>
<div class="main">
<f:render section="Main" />
</div>
</contentwrapper>
</body>
注意:我在CSS中评论了媒体查询,以确保它像在移动设备上一样显示
如果现在单击汉堡图标以展开菜单折叠,则可以看到该菜单首先显示为水平放置而不是垂直放置每个菜单点,大约半秒钟后,它便变为原来的样子。
我的错误是什么?如果您知道解决方法,请告诉我。 预先感谢
答案 0 :(得分:1)
Bootstrap4 具有.nav
类,具有以下规则:
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
所以我们必须使用flex-wrap:nowrap;
我不知道您是否会在网站的另一部分中使用该Bootstrap类,因此也许最好仅在导航时覆盖它:
#navbarContent.nav{
flex-wrap:nowrap;
}
我还删除了您的@media (max-width: 767.98px) {
(^ _ ^;)...因为我认为这没有必要:我认为这是一个移动优先网站。
顺便说一句,这是代码:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
.sidebar {
background-image: linear-gradient(180deg, rgb(33, 243, 96) 0%, #077710 70%);
}
.sidebar .navbar-brand {
font-size: 1.1rem;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.main {
flex: 1;
}
.main .top-row {
background-color: #e6e6e6;
border-bottom: 1px solid #d6d5d5;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item a.active {
background-color: rgba(255, 255, 255, 0.25);
color: white;
}
.nav-item a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.content {
padding-top: 1.1rem;
}
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
.main .top-row {
display: none;
}
/* Burger-icon animation */
.navbar-toggler {
position: relative;
}
.navbar-toggler:focus,
.navbar-toggler:active {
outline: 0;
}
.navbar-toggler span {
display: block;
background-color: #444;
height: 3px;
width: 25px;
margin-top: 4px;
margin-bottom: 4px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
position: relative;
left: 0;
opacity: 1;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
-webkit-transition: transform .35s ease-in-out;
-moz-transition: transform .35s ease-in-out;
-o-transition: transform .35s ease-in-out;
transition: transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
position: absolute;
left: 12px;
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
opacity: 0.9;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
height: 12px;
visibility: hidden;
background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
position: absolute;
left: 12px;
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
opacity: 0.9;
}
#navbarContent.nav{
flex-wrap:nowrap;
}
@media (min-width: 768px) {
contentwrapper {
flex-direction: row;
}
.main{
position: absolute;
width: calc(100% - 250px);
margin-left: 250px;
float: right;
}
.sidebar {
width: 250px;
height: 100vh;
position: fixed;
top: 0;
overflow-y: scroll;
}
.main .top-row {
position: sticky;
top: 0;
}
.main > div {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
.navbar-toggler {
display: none;
}
.sidebar .collapse {
display: block;
}
}
</style>
<contentwrapper>
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">MyTestPage</a>
<button class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbarContent" aria-expanded="false" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav flex-column collapse" id="navbarContent">
<li class="nav-item">
<a class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page3
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page4
</a>
</li>
</ul>
</div>
<div class="main">
<f:render section="Main" />
</div>
</contentwrapper>