使用 Materialise 制作全宽导航

Question

我正在努力让我的导航栏全宽。第 3 - 17 行。

我正在为我的框架使用 materialize 包：https://materializecss.com/

在使用谷歌搜索 "width: 100%" 和 "s12" 等不同结果后，我已经接近了全宽，但我仍然遇到 margin/padding 问题，其中存在这个神秘的问题两边 space 的条子。

我也试过 margin-left=0 和 margin-right=0 还是没有效果

我也试过将页边距设置为底片，但没有效果。

这是我使用的代码：

<div class="container">

<div class="row">
  <div class="col s12">
    <nav>
      <div class="nav-wrapper deep-purple darken-1">
          <form>
            <div class="input-field l8">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
            </div>
          </form>
      </div>
    </nav>
  </div>  
</div>

    <footer class="page-footer deep-purple darken-1">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Footer Content</h5>
            <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright  deep-purple darken-4">
        <div class="container center-align">
          <div class="row valign-wrapper">
            <div class="col s7">
              © 2018 Copyright
            </div>
            <div class="col valign-wrapper">
              Tutor? Sign Up Here! &nbsp
              <a class="waves-effect waves-light orange btn right">Post Job</a>
            </div>
          </div>
        </div>
      </div>
    </footer>

Screenshot of my site

更令人沮丧的是，我已经成功地让页脚在屏幕上换行了。

感谢任何建议！

Answer 1

从导航栏中删除 container 和 col s12，保持这样，希望对您有所帮助

<div class="row">
    <nav>
      <div class="nav-wrapper deep-purple darken-1">
          <form>
            <div class="input-field l8">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
            </div>
          </form>
      </div>
    </nav>
</div>

使用 Materialise 制作全宽导航

Making Full Width Navs with Materialize

html

css

materialize