javascript - Bootstrap-定位Jasny Offcanvas元素

我正在使用Bootstrap 3和Jasny的应用程序上工作。我的应用程序有两个导航栏。一个用于主要的导航项，另一个用于子导航项。在应用程序的主要区域，我有一个“添加”按钮。当用户单击添加按钮时，我想使用Jasny显示一些表单元素。为了做到这一点，我正在使用此JSFiddle中显示的代码，即：

<header>
  <nav class="navbar" style="background-color:#2e2e2e; border-radius:0rem;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand hidden-xs" href="/" style="color:white;">Welcome</a>
      </div>
    </div>
  </nav>
</header>

<main>
  <nav class="navbar" style="background-color:#5e5e5e; border-radius:0rem; position:relative; top:-20px;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand hidden-xs" href="/" style="color:white;">Subnav</a>
      </div>
    </div>
    </nav>

  <div class="container-fluid">
    <div class="container">
      <button class="btn btn-primary" data-toggle="offcanvas" data-target="#mySlideout">Add Item</button>

      <nav id="mySlideout" class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation" style="width:400px;">
        <a class="navmenu-brand" href="#">Add New Item</a>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <form id="addForm" action="/add" method="post" role="form">
          <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                  <label class="control-label" for="Name">Name</label>
                  <input class="form-control" id="Name" name="Name" type="text" value="" autocomplete="off">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-5">
                <button class="btn btn-default">Cancel</button>
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </form>
</nav>
    </div>
  </div>
</main>

我的挑战是在滑入画布面板时确定其位置。它占据了屏幕的整个高度，这真是太好了。但是，我希望它显示在子导航下面。您可以在JSFiddle中看到它的外观。但是，实际上，我正在尝试创建如下所示的内容：

+-------------------------------------------------------------------+
| Welcome                                                           |
+-------------------------------------------------------------------+
| Subnav                                                            |
+------------------------------------------------+------------------+
| [add item]                                     | Add New Item   x |
|                                                +------------------+
|                                                | Name             |
|                                                | _______________  |
|                                                |                  |
|                                                |                  |
|                                                |                  |
|                                                |                  |
|                                                |                  |
|                                                |                  |
|                                                |                  |
|                                                | [save]  [cancel] |
+--------------------------------------------------------------------

上面的草图显示offcanvas面板的顶部在subnav容器下方。我该怎么做？

最佳答案

在子菜单的顶部添加边距。

    <nav id="mySlideout" class="navmenu navmenu-default
    navmenu-fixed-right offcanvas" role="navigation"
style="width:400px; margin-top:100px;">

https://jsfiddle.net/fhz2peg6/

关于javascript - Bootstrap-定位Jasny Offcanvas元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37029019/