如果调整页面大小,左侧菜单有拥抱间隙
Left Menu Has Hug Gap if Page Is Resized
我的应用程序出现问题,在调整页面大小时左侧菜单有很大的差距。我玩过 css 文件,但我没有成功。您的帮助将不胜感激。
CSS Class:
.Login
{
margin-right:40px;
}
.headerColor{
background-color: #0083AA;
color:black;
position:fixed;
}
nav > div > ul > li > a{
background-color:#0083AA;
color:black;
}
.leftMenu {
width: 210px;
height: 100%;
position: fixed;
background-color: #0083AA;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
z-index: 100;
margin-top:50px;
margin-left:-15px;
}
.formContent
{
background-color:#0083AA;
margin:50px 0 0 -125px;
color:black;
width:100%;
}
.leftMenu > nav > ul > li > a {
background-color:#0083AA;
color:black;
}
.formContent > form
{
padding-top: 50px;
-moz-border-radius: 5xp;
-webkit-border-radius: 5xp;
border-radius: 5xp;
}
.intputDisplay{
width:150px;
}
索引页:
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
@Styles.Render("~/Content/css")
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>Student Organization</title>
<style type="text/css">
.selected{background-color: #efefef; width:120px; }
.detail{width: 300px;margin: 30px;border-top: 1px solid #efefef;}
</style>
</head>
<body id="index">
<!-- Angular UI Router Directive for template insertion -->
@*<div id="content" ui-view></div>*@
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" >
<div ui-view="header"></div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
<div ui-view="LeftMenu" style="width:100%;height:100%"></div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
<div ui-view="content" style="width:100%;height:100%"></div>
</div>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/AngularJS/angular.js"></script>
<script src="~/Scripts/AngularJS/angular-ui-router.js"></script>
<script src="~/Scripts/myapp.js"></script>
<script src="~/Scripts/Bootstrap/bootstrap.js"></script>
</body>
</html>
左侧菜单
<aside class="leftMenu">
<nav class="navbar navbar-nav">
<ul class="nav nav-stacked">
<li><a ng-href="/">Home</a></li>
<li ui-sref-active="active"><a ui-sref=".ListStudents">List Students</a></li>
<li ui-sref-active="active"><a ui-sref=".Courses">Courses</a></li>
<li ui-sref-active="active"><a ui-sref=".Prefessors">Professors</a></li>
</ul>
</nav>
</aside>
顶部页眉:
<link href="~/Content/font-awesome-4.4.0/css/font-awesome.css" rel="stylesheet" />
<header ng-cloak>
<nav class="navbar navbar-fixed-top headerColor">
<div class="pull-right user-nav-drop">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle Login" data-toggle="dropdown" ng-click="$event.preventDefault();">
<i class="fa fa-user fa-2x"></i>
<span style="font-size: 15px;">  {{username}}   </span> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu white" role="menu">
<li><a ui-sref="myApp.Logout" class="Login"><i class="glyphicon glyphicon-log-out"></i> Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
截图:
如果您也将蓝色 header 的高度固定为 10%,那么您只需添加
top: 10%;
改成你左边菜单的风格。
只需使用为蓝色 header 指定的高度值。
如果有none,您还可以在样式中添加"height: 10%;"。
但要了解更多详情,请提供完整的简约示例!
我的应用程序出现问题,在调整页面大小时左侧菜单有很大的差距。我玩过 css 文件,但我没有成功。您的帮助将不胜感激。
CSS Class:
.Login
{
margin-right:40px;
}
.headerColor{
background-color: #0083AA;
color:black;
position:fixed;
}
nav > div > ul > li > a{
background-color:#0083AA;
color:black;
}
.leftMenu {
width: 210px;
height: 100%;
position: fixed;
background-color: #0083AA;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
z-index: 100;
margin-top:50px;
margin-left:-15px;
}
.formContent
{
background-color:#0083AA;
margin:50px 0 0 -125px;
color:black;
width:100%;
}
.leftMenu > nav > ul > li > a {
background-color:#0083AA;
color:black;
}
.formContent > form
{
padding-top: 50px;
-moz-border-radius: 5xp;
-webkit-border-radius: 5xp;
border-radius: 5xp;
}
.intputDisplay{
width:150px;
}
索引页:
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
@Styles.Render("~/Content/css")
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>Student Organization</title>
<style type="text/css">
.selected{background-color: #efefef; width:120px; }
.detail{width: 300px;margin: 30px;border-top: 1px solid #efefef;}
</style>
</head>
<body id="index">
<!-- Angular UI Router Directive for template insertion -->
@*<div id="content" ui-view></div>*@
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" >
<div ui-view="header"></div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
<div ui-view="LeftMenu" style="width:100%;height:100%"></div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
<div ui-view="content" style="width:100%;height:100%"></div>
</div>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/AngularJS/angular.js"></script>
<script src="~/Scripts/AngularJS/angular-ui-router.js"></script>
<script src="~/Scripts/myapp.js"></script>
<script src="~/Scripts/Bootstrap/bootstrap.js"></script>
</body>
</html>
左侧菜单
<aside class="leftMenu">
<nav class="navbar navbar-nav">
<ul class="nav nav-stacked">
<li><a ng-href="/">Home</a></li>
<li ui-sref-active="active"><a ui-sref=".ListStudents">List Students</a></li>
<li ui-sref-active="active"><a ui-sref=".Courses">Courses</a></li>
<li ui-sref-active="active"><a ui-sref=".Prefessors">Professors</a></li>
</ul>
</nav>
</aside>
顶部页眉:
<link href="~/Content/font-awesome-4.4.0/css/font-awesome.css" rel="stylesheet" />
<header ng-cloak>
<nav class="navbar navbar-fixed-top headerColor">
<div class="pull-right user-nav-drop">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle Login" data-toggle="dropdown" ng-click="$event.preventDefault();">
<i class="fa fa-user fa-2x"></i>
<span style="font-size: 15px;">  {{username}}   </span> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu white" role="menu">
<li><a ui-sref="myApp.Logout" class="Login"><i class="glyphicon glyphicon-log-out"></i> Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
截图:
如果您也将蓝色 header 的高度固定为 10%,那么您只需添加
top: 10%;
改成你左边菜单的风格。 只需使用为蓝色 header 指定的高度值。 如果有none,您还可以在样式中添加"height: 10%;"。 但要了解更多详情,请提供完整的简约示例!