时间戳

首页 > 解决方案 > 使用 Materialise 制作全宽导航

html - 使用 Materialise 制作全宽导航

问题描述

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

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

在谷歌搜索不同的结果（如“宽度：100%”和“s12”全宽度）后，我已经能够接近，但我仍然遇到边距/填充问题，两边都有这个神秘的空间。

我也试过 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>

我的网站截图

更令人沮丧的是，我已经成功让页脚覆盖了屏幕。

任何建议表示赞赏！

标签： htmlcssmaterialize

解决方案

从导航栏中删除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>

推荐阅读