Question

我最近尝试使用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布局不再与导航栏重叠。

然而，另一个问题出现了，如果屏幕尺寸发生变化，我必须手动更改样式的高度属性。

所以我想知道是否有任何简单的方法来解决这个问题。

由于德里克

Answer 1

也许为时已晚，但我有同样的问题，这是我的解决方案：只需添加一个大小和最大尺寸的假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

Answer 2

您可以将UI-Layout包装为具有样式的容器以防止重叠：

.wrap {
  position: absolute;
  top: 50px;
  left:0;
  bottom:0;
  right:0;
}

http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq

Angular UI-Layout与导航栏

2 个答案: