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

Question

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

我看到乐队做的最重要的事情之一是添加全宽图像（example), and I remembered reading this article about full-width rows in Bootstrap, and searched through Materialize's 网格文档，无济于事。

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

Answer 1

编辑：这是我能够实现的 "full-width" 行的 pen。对所有 angular 的东西和其他草率感到抱歉。这是一个有点大的项目（他们的管理页面上有 CMS 的准系统），我没有时间去完成并删除所有不相关的东西。

嗯，到目前为止，我相信我已经找到了解决办法。我会给别人一个测试和回答的机会

<div class="full-width">
  <img src="http://lorempixel.com/1900/400/" class="responsive-img"/>
  <div class="full-width-content">
    <h3> We are Kokopelli </h3>
  </div>
</div>
<!-- I don't know how well this solution will work if I want to add
more than one full width column, but for now it worked -->
<main class="container">
  <div class="row">
    <div class="schedule col l8 ">
      <h3> Schedule </h3>
....
</main>

其中我的scss如下

.full-width{
  max-width:100%;
  margin: 0 auto;
  position: relative;
  .full-width-content{
    position: absolute
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

Answer 2

如果我没理解错的话，你希望你的图像横跨整个屏幕宽度：因此，这是一个简单直观的方法：

HTML:

<div class = "image">
    <div class = "container">
        <div class = "row">
            <div class = "col s12">

            </div>
        </div>
    </div>
</div>

和CSS:

.image {
    background-image: url("");
    background-repeat: no-repeat;
    /*background-color: #2B2931;*/
    height: 80vh;
    background-size: cover;
    background-position: center;
}

此方法的好处是您可以获得内容所需的所有响应能力，并且还可以为文本实现容器宽度。

Answer 3

你也可以这样做

.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>

Answer 4

在Materialize CSS will give you an equivalent of container-fluid in Bootstrap CSS中使用网格系统考虑以下示例：

<div class="row">
    <div class="col s12 m12 l12 xl12">
      <h3>Fluid container</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum ex nostrum odit quis debitis? Iure incidunt soluta adipisci suscipit ut debitis facilis maxime, velit laborum delectus asperiores cum, minus corporis!</p>
    </div>
</div>

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

Does Materialize CSS framework have a "container-fluid" equivalent?

html

css

materialize