padding-margin 组合如何在 Bootstrap 中的 navbar-header 类上工作？答案

【问题标题】：How does padding-margin combination work on navbar-header class in Bootstrap?padding-margin 组合如何在 Bootstrap 中的 navbar-header 类上工作？
【发布时间】：2016-05-06 12:04:11
【问题描述】：

最近我注意到.navbar-header 在视口宽度 -15px 边距。可能是为了补偿container 的15px 填充。到目前为止，一切都很好。但是对于大于 768px 的视口宽度，.navbar-header 没有边距。对于大于768px 的视口宽度，.navbar-brand 被赋予15px left margin。

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

我的猜测是，由于宽度大于 768，因此切换菜单按钮是不可见的，并且 .navbar-header 上的负边距会拉动 navbar 列表元素 15px 删除徽标和导航项之间的间隙。所以当菜单切换按钮不存在时，他们只是拿走了margin-right。

【问题讨论】：

那么你的问题到底是什么？
@RachelS 我的问题是，当视口宽度从低于 768 像素变为高于 768 像素时，将边距从 .navbar-header 更改为 .navbar-brand 的原因是什么？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：