我最近尝试使用Angular UI Layout(
https://github.com/angular-ui/ui-layout),它非常简单易用.但是,我发现UI布局总是与Bootstrap的navbar重叠.
你可以在这看看它:http://plnkr.co/edit/r5veawwbgz98bZjLdr1B
<!DOCTYPE html> <html ng-app="x"> <head> <Meta charset="utf-8" /> <Meta name="viewport" content="width=device-width"> <title>UI.Layout Issue</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.css"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-envelope"></i><span>Website</span></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">menu1</a></li> <li><a href="#about">Menu2</a></li> <li><a href="#about">Menu3</a></li> <li><a href="#about">Menu4</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav> <div ui-layout style="position:relative; height:500px"> <div ui-layout-container style="border-style: solid;"><h1>top</h1></div> <div ui-layout-container> <div ui-layout="{flow : 'column'}" > <div ui-layout-container style="border-style: solid;" ><h1>left</h1></div> <div ui-layout-container style="border-style: solid;" ><h1>right</h1></div> </div> </div> <div ui-layout-container style="border-style: solid;"><h1>bottom</h1></div> </div> <!-- Le javascript --> <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <script type="application/javascript" src="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.min.js"></script> <script> angular.module('x',['ui.layout']); </script> </body> </html>
进一步调查显示它是由UI布局的绝对定位引起的.如果我添加一个sytle:
<div ui-layout style="position:relative; height:500px">.
UI布局不再与导航栏重叠.
但是,出现了另一个问题,如果屏幕尺寸发生变化,我必须手动更改样式的高度属性.
所以我想知道是否有任何简单的方法来处理这个问题.
谢谢
德里克
解决方法
也许现在为时已晚,但我有同样的问题,这是我的解决方案:
只需添加一个大小和最大尺寸的假div,并将导航栏的高度值添加到您的ui布局中,并将导航栏修复到最顶层!
只需添加一个大小和最大尺寸的假div,并将导航栏的高度值添加到您的ui布局中,并将导航栏修复到最顶层!
<nav class="navbar navbar-default navbar-fixed-top"> <div ui-layout> <div ui-layout-container size="40px" max-size="40px" style="border-style: solid;"> <h1>fake</h1></div> <div ui-layout-container style="border-style: solid;"> <h1>top</h1></div> <div ui-layout-container> <div ui-layout="{flow : 'column'}"> <div ui-layout-container style="border-style: solid;"> <h1>left</h1></div> <div ui-layout-container style="border-style: solid;"> <h1>right</h1></div> </div> </div> <div ui-layout-container style="border-style: solid;"> <h1>bottom</h1></div>
这是@L_403_2@