Question

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

<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

我看到你正在使用固定的SideNav。您是否还在内容中添加了必要的填充以抵消它？

假设您拥有通用结构且内容位于<main>标记内，请将其添加到CSS文件中：

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

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

为清晰起见，这是一个更新的fiddle。

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

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

1 个答案: