Question

我正在使用一个使用Bootstrap 3和Jasny的应用。我的应用程序有两个导航栏。一个用于主要导航项，一个用于子导航项。在应用程序的主要区域，我有一个＆＃34;添加＆＃34;按钮。当用户单击添加按钮时，我想使用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>

我面临的挑战是在滑动面板滑入时定位它。它占据了屏幕的整个高度，这很棒。但是，我希望它出现在subnav下面。你可以在JSFiddle中看到它的样子。但是，实际上，我试图创建一些看起来像这样的东西：

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

上面的草图显示，offcanvas面板的顶部位于subnav容器下方。我怎么能做到这一点？

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/

Bootstrap - 定位Jasny Offcanvas元素

1 个答案: