html - Materialise CSS 框架是否具有 "container-fluid"等效项？

Question

我正在为 friend 乐队创建一个网站，我认为现在是学习新的移动优先框架的好时机。

我看到乐队做的最重要的事情之一是添加全宽图像 ( example )，我记得读过 this article关于 Bootstrap 中的全 Angular 行，并搜索了 Materialize's网格文档，无济于事。

我需要的是一种创建此“全宽”行的方法，理想情况下不会破坏响应能力。据我了解，Bootstrap 在“container-fluid”中使用填充和边距(例如，width: 100%;, padding: 0; margin: -15px; ，其中 body 我相信有一个 margin: 15px; padding: 15px;)，这很容易允许全宽行，但 Materialize 没有。任何帮助将不胜感激，我的设计技能不是最好的!

Answer 1

你也可以这样做

.container{
            width: 100%;
            max-width:initial;
            > .row{
                margin: 0;
                > .col{
                    padding: 0;
                }
            }
        }

在你的 scss 中。

例子如下:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<style>
.col {
  background-color: tomato;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.container {
  width: 100%;
  max-width:initial;
}
.container > .row {
  margin: 0;
}
.container > .row > .col {
  padding: 0;
}
</style>
<div class="container">
  <div class="row">
    <div class="col s12">
      This div is 12-columns wide on all screen sizes
    </div>
    <div class="col s6 yellow">6-columns (one-half)</div>
    <div class="col s6 blue">6-columns (one-half)</div>
  </div>
  <div class="row">
    <div class="col s12">
      This div is 12-columns wide on all screen sizes
    </div>
   
  </div>
</div>