Question

我刚刚开始使用，当我使用Foundation for apps时，我将它出现在元素后面（如图1所示）。在检查CSS时，它的定位是绝对的。这只是意味着我在某处遗漏了某些东西。

背后出现的行动表

注意事项：此操作表位于AngularJS指令中。

指令内的代码是：

＆＃13;

     *<!DOCTYPE html>
    <html>
    <head>
      <title>Animal</title>
      <link href = "bootstrap-3.3.6-dist/css/bootstrap.min.css" rel = "stylesheet">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
        <style>
#navigation {
  margin-top:125px;
  }
</style>
    </head>
    <body>
    <div class="container">
       <div id="sub1" class="col-md-4">
          <img src="welgevonden.jpg" alt="logo" style="float-left;width:100px;height:100px;position:absolute;">
       </div>
       <div id="sub2" class="col-md-8">
        <h1> Animal </h1>
        <h4>  Game  </h4>
       </div>

      <nav class="navbar navbar-inverse" id="navigation">
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">AboutUs</a></li>
        <li><a href="#">ConatackUs</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
</nav>
    <div id="myCarousel" class="col-md-12 carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="rhino.jpg" alt="Rhino" width="500" height="500">
          </div>

          <div class="item">
            <img src="ele.jpg" alt="Elephant" width="500" height="500">
          </div>

          <div class="item">
            <img src="tiger.jpg" alt="Tiger" width="500" height="500">
          </div>

          <div class="item">
            <img src="lion.jpg" alt="Lion" width="500" height="500">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
    </div>
    </body>
    </html>*

＆＃13;

另请注意，导航栏上正在使用相同的操作表及其罚款。非常感谢任何可以指导我正确指导我的人。：）

Answer 1

通过添加

解决了这个问题

overflow: visible;

到动作表的容器中，因为它包含在一个网格块

中

＆＃13;

<div class="grid-block"> // Insert here
  <zf-action-sheet id="actionSheet">
    <zf-as-button class="">
        <i class="icon-menu">Seriously Missing?</i>
    </zf-as-button>
    <zf-as-content position="bottom">
        <div class="row">
            test 123
        </div>
    </zf-as-content>
  </zf-action-sheet>
</div>

＆＃13;

这是在设法找到非常隐藏的this之后。

基金会6中的ActionSheet出现在后面

1 个答案: