Materialise CSS框架有一個「容器流體」的等價物嗎？

Question

我正在爲一個朋友樂隊創建一個網站，我決定現在是學習新的移動第一個框架的好時機。

其中一個最大的事情，我看到樂隊做的是將全幅圖像（example），我記得讀this article關於引導全寬行，並通過Materialize's電網文檔搜索，無果。

我需要的是一種方法來創建這個「全寬」行，理想情況下沒有打破響應。根據我的理解，Bootstrap利用「容器流體」中的邊距（例如，width: 100%;,padding: 0;margin: -15px;，其中body我相信有一個margin: 15px; padding: 15px;），這很容易允許全寬度的行，但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

編輯：這是我能夠實現的「全角」行的pen。對不起所有的角色和其他sloppiness。這是一個有點大的項目（在他們的管理頁面上有一個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; 
} 

這種方法的好處是你需要爲你的內容的所有反應，並且還實現了容器寬度爲您的文本。