angularjs – Angular UI-Layout与导航栏重叠

我最近尝试使用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

angularjs – Angular UI-Layout与导航栏重叠

解决方法

猜你在找的Angularjs相关文章