我有一個側邊欄,它在桌面上顯示效果很好。但在移動設備上,這很奇怪。 (在移動設備的模擬器上一切都很好)。 以下是一些手機屏幕截圖。整個顯示變大,側邊欄滾動一點,菜單的其他內容無法訪問。它也根據左側部分的大小而改變。可滾動邊欄不顯示移動設備上的所有內容
screenshot 1 screenshot 2 我的HTML(使用引導和angularjs):
<div id="wrapper">
<div class="row">
<nav class="navbar navbar-fixed-top orange-back" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="" class="btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
<a class="no-decoration-link" href="#">STRICS</a>
</div>
</div>
</div>
</nav>
</div>
<div class="row">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav role="navigation">
<ul class="sidebar-nav nav">
<h5 class="nav-group">Расходы и доходы</h5>
<li><a href="#newoutcome" ng-click="showingForm = 'newoutcome'">Купить материал</a></li>
<li><a href="#userinfo" ng-click="showingForm = 'userinfo'"> Личный кабинет</a></li>
<li><a href="#" ng-click="logout()"> Выйти</a></li><br><br>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="view-placement" ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
我的CSS:
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.sidebar-nav {
overflow: scroll;
}
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #FFAB62;
position: fixed;
height: 95%;
overflow-y: auto;
z-index: 1000;
transition: all 0.6s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.6s ease 0s;
padding-right: 4px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 20px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #41484c;
display: block;
text-decoration: none;
padding-left: 20px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.nav>li>a {
padding: 4px 10px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #41484c;
padding-right: 15px;
}
@media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
你有使用'viewport'元標記爲移動視圖即'<元名稱=「視口」內容=「寬度=設備寬度,初始規模= 1」>' – nashcheez
@nashcheez是的,我已經用過了。 – Almira