如何在o col内使用sideNav（而不是在网站上）？

Question

我试图拥有一个＆＃34; sideNav＆＃34;在＆＃34; col＆＃34;里面，然后每个＆＃34; cols＆＃34;可以有一个＆＃34;侧面板＆＃34;可以调整选项。

我的模板看起来像这样：

  <div class="col s12 m12 l12">

    <i class="material-icons sidenavact" data-activates='slide-out1'>menu</i>  

    // my content here

    <ul id="slide-out1" class="side-nav right hide-on-med-and-down">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>

  </div>


  <div class="col s12 m12 l12">

    <i class="material-icons sidenavact" data-activates='slide-out2'>menu</i>  

    // my content here

    <ul id="slide-out2" class="side-nav right hide-on-med-and-down">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>

  </div>

我用以下内容初始化我的按钮：

$( col ).find('.sidenavact').sideNav( { closeOnClick: true, edge: 'right' } )

但不幸的是，SideNav正在浏览整个网站，而不是仅限于父母＆＃34; col＆＃34;。

我尝试在col上使用position：relative，但是没有用。

任何建议都不仅仅是值得赞赏的。

编辑（取得一些进展）：

将side-nav div位置切换为＆＃34; absolute＆＃34;父母和亲戚＃34;几乎完美地完成了这个技巧。

但仍有一些CSS问题：

1 - 我不需要使用＆＃34;黑色叠加＆＃34;来阻止该网页。因为side-nav意味着包含在＆＃34;小部件＆＃34;。

中

2 - ＆＃34;职位：绝对＆＃34;让侧面导航显示在卡片阴影上＃34;也许不尊重阴影所形成的填充物？

Answer 1

如果我说得对，你想在你的代码上做两个或更多的侧面导航。使你需要改变你的列的大小。

<div class="col s12 m6 l6">尝试减少平板电脑和桌面设备的使用量。