最近我注意到 .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。
最佳答案
试试这个
<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>
关于html - 填充边距组合如何在 Bootstrap 中的 navbar-header 类上工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37071947/