Bootstrap-定位Jasny Offcanvas元素

Question

我正在开发一个使用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>

我的挑战是当它滑入时，如何定位画布外的面板。它占据了屏幕的整个高度，这太棒了。但是，我希望它出现在sub-v之下。您可以在JSFiddle中看到它的样子。然而，在现实中，我正试图创建一个看起来像这样的东西：

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

上面的草图显示了画布外面板的顶部位于sub-v容器下方。我怎样才能做到这一点？

Answer 1

在子菜单顶部添加边距。

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

https://jsfiddle.net/fhz2peg6/