Question

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

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

我需要的是一种创建这个“全宽”行的方法，理想情况下不会破坏响应性。根据我的理解，Bootstrap使用padding＆amp; “容器流体”中的边距（例如width: 100%;，padding: 0; margin: -15px;，其中body我认为有margin: 15px; padding: 15px;），这很容易让人满意-width行，但Materiallize不。任何帮助将不胜感激，我的设计技巧不是最好的！

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>

Answer 2

编辑：这是＆＃34;全宽＆＃34;的pen我能够实现的那一行。抱歉所有的角质和其他邋..这是一个有点大的项目（管理页面上有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 3

如果我理解正确，您希望图像跨越整个屏幕宽度：因此，这是一个简单直观的方法：

<强> 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 4

在 Materialize CSS 中使用网格系统将为您提供等效于 Bootstrap CSS 中的 container-fluid 考虑以下示例：

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

Materialize CSS框架是否具有“容器流体”等价物？

4 个答案: