如何在 Materializecss 的桌面屏幕内容中添加固定的 sidenav 填充？

Question

我目前有一个基本的大纲，但是当我缩小浏览器的宽度时，sidenav 会覆盖内容和导航栏中的 "logo"。是否可以为桌面屏幕（但不是移动设备）提供填充？

这里是 fiddle - https://jsfiddle.net/v2h8pvxz/

<nav>
  <div class="container">
    <div class="nav-wrapper"><a href="#" class="brand-logo">Logo</a></div>
  </div>
  <ul class="right hide-on-med-and-down">
    <li><a href="#!" class="waves-effect">First Sidebar Link</a></li>
    <li><a href="#!" class="waves-effect">Second Sidebar Link</a></li>
    <li><a class="dropdown-button waves-effect" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
    <ul id='dropdown1' class='dropdown-content'>
      <li><a href="#!">First</a></li>
      <li><a href="#!">Second</a></li>
      <li><a href="#!">Third</a></li>
      <li><a href="#!">Fourth</a></li>
    </ul>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
</nav>

<div class="row">
  <div class="col s12 m4 l3">
    <ul id="slide-out" class="side-nav fixed">
      <li><a class="waves-effect" href="#!">First Sidebar Link</a></li>
      <li><a class="waves-effect" href="#!">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect">Dropdown</a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="col s12 m8 l9">
    <h1>adsffadsadfsfdasadfsafds sadf sadf adfs </h1>
  </div>
</div>

Answer 1

我看到您使用的是固定侧导航。您是否还向您的内容添加了所需的填充以抵消它？

假设您有共同的结构并且您的内容在您的 <main> 标签中，请将此添加到您的 CSS 文件：

header, main, footer {
  padding-left: 240px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

为清楚起见，这里更新了 fiddle。

请注意，我在 <main> 标签中添加了您的内容。

如何在 Materializecss 的桌面屏幕内容中添加固定的 sidenav 填充？

How do I add fixed sidenav padding to the content for desktop screens in Materializecss?

html

materialize