angularjs – Angular UI-Layout与导航栏重叠
发布时间:2020-12-17 16:56:36 所属栏目:安全 来源:网络整理
导读:我最近尝试使用Angular UI Layout( https://github.com/angular-ui/ui-layout),它非常简单易用.但是,我发现UI布局总是与Bootstrap的navbar重叠. 你可以在这看看它:http://plnkr.co/edit/r5veawwbgz98bZjLdr1B !DOCTYPE htmlhtml ng-app="x"head meta charse
我最近尝试使用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布局中,并将导航栏修复到最顶层! <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> 这是your plunker updated (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 修复bootstrap daterangepicker不能清空日期的问题
- angular-ui-bootstrap – 如何为angular ui-bootstrap tabs
- MQTT服务-Mosquitto简单安装及TLS双向认证配置
- 使用ASIHttpRequest调用WebService
- angular-ui-tree
- ace 1.3.3 官方最新版本-ace使用教程ace bootstrap模版--中
- 延迟Vim中键序列超时的方法?
- .net下调用webservice(json格式、ut8转码、zip压缩)
- Bootstrap CSS – 如何使用其下方的内联无线电获取控件标签
- Window下Redis集群搭建配置