Question

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

我正在为我的框架使用具体化程序包：https://materializecss.com/

在搜索不同的结果（例如“ width：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>

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>

使用Materialize进行全宽导航

1 个答案: