html - 填充边距组合如何在 Bootstrap 中的 navbar-header 类上工作？

Question

最近我注意到 .navbar-header 在视口(viewport)宽度 < 768px 的左右边距有 -15px。可能是为了补偿 container 的 15px 填充。到目前为止，一切都很好。但对于大于 768px 的视口(viewport)宽度，.navbar-header 没有边距。 .navbar-brand 为大于 768px 的视口(viewport)宽度提供 15px 左边距。

• 将边距从 .navbar-header 更改为 .navbar-brand 的原因是什么？

我的猜测是，因为对于大于 768 的宽度，切换菜单按钮是不可见的并且 .navbar-header 上的负边距将拉动 navbar 列表元素 15px 删除 Logo 和导航项之间的喉音。因此，当菜单切换按钮不存在时，他们只是取消了 margin-right。

Answer 1

试试这个

 <div class="drawer-overlay">

        Your main nav content goes here.
 </div>

之后应用脚本

<script type="text/javascript">

    $(document).ready(function() {

    $('.drawer').drawer({

    nav: 'drawer-nav',

    navList:     'drawer-nav-list',

    overlay:     'drawer-overlay',

    toggle:      'drawer-toggle',

    openClass:   'drawer-open',

    closeClass:  'drawer-close',

    desktopEvent: 'mouseover', // or click

    speed: 200,

    width: 280,

    });

    });

    </script>