zurb基礎是否有可能具有全行寬度

我正在使用基礎3構建響應式網站，但我希望頁腳和導航背景寬度佔據整個寬度？我已經命名我的行爲zurb基礎是否有可能具有全行寬度

class="row navigation" 
class="row footer"

我試圖尋找如何解決這個問題，但我沒有選擇。我假設這是在foundation.css文件中的一個小修復，但目前我剛剛接觸它，這有點太過分了。

任何poiinters非常感謝。

來源

2012-08-01 Chou One

想通了somehow.thanks – 2012-08-01 06:32:30

我完全不同意答案。你不應該使用！重要

請參考我的文章和演示在http://edcharbeneau.github.com/FoundationSinglePageRWD/

你應該能夠讓你從那裏需要什麼。該演示是爲2.2，但功能非常類似於v3。

來源

2012-08-01 13:33:04

如果您使用Zurb Foundation Framework，只需刪除row類，並將該元素包裝在寬度爲100％的類container中。現在你可能要居中的東西，使用centered類是這樣的：

<div class="container navigation"> 
    <div class="centered"> 
     Some navigation stuff 
    </div> 
</div>

來源

2012-09-05 00:09:58 cosmicdot

又是什麼類.centered？你應該添加一些更多的回答你的回答 – Mark 2012-09-25 07:19:35

.centered內置到Zurb的基礎 - 有一個專門討論這個的文檔，http://foundation.zurb.com/docs/grid.php有很多快速定位非常有用的元素。 – cosmicdot 2012-11-20 17:19:30

我昨天碰到了同樣的問題。訣竅是，對於全寬度跨區塊，只需將它們保留在行/列結構之外，因爲行/列將始終應用默認填充。保留你的頁腳和頁眉，並在其中使用行/列。

<header> 
    This will span the full width of the page 
</header> 
<div class="row"> 
    <div class="twelve columns"> 
     This text will flow within all typical padding and margins 
    </div> 
</div> 
<footer> 
    This will span the full width of the page 
    <div class="row"> 
     <div class="twelve columns"> 
      This text will flow within all typical padding and margins 
     </div> 
    </div> 
</footer>

來源

2012-10-19 15:57:45 nikolasleblanc

只需將您的代碼放在div class =「row」之外，即可！ – 2013-08-10 18:01:07

我同意這個答案，但你可以使用任何div來包裝。它不一定是諸如頁腳之類的html5元素。它必須完全在任何嵌套網格結構之外。通常，您需要添加邊距和填充以使其與頁面上的其他元素可視化地「匹配」。我還創建了一個[代碼筆來說明上述概念]（http：// codepen。IO/jamesstoneco /筆/ jErXyY）。 – JAMESSTONEco 2015-05-18 02:33:48

我不知道如果我失去了一些東西，但我不得不添加一個.row DIV爲.centered工作。在這種情況下，我仍然可以使.header具有全寬背景，但.container方法對我無效。

<header class="header"> 
    <div class="row"> 
    <div class="centered"> 
     Logo and stuff 
    </div> 
    </div> 

    <div class="row"> 
    Some navigation stuff 
    </div> 
</header>

來源

2013-01-01 23:12:12 Jordan

如果你不給它的「行」類，並把塔內它適用於100％的寬度

來源

2013-02-04 23:28:17

你真的想保留該行類，否則你失去了很多的電網系統的功率。爲什麼不將$ rowWidth的設置從1000（默認）更改爲100％。這可以在文件中找到foundation_and_overrides.scss

來源

2013-02-12 13:25:18 stephen

我一直在做的是添加一個自定義類，以便我可以鏈接與.row並覆蓋最大寬度設置。

<div class="row full-width"></div>

.row.full-width { 
    width: 100%; 
    max-width: 100%; 
}

我把寬度在這裏也覆蓋基地，但它是在foundation.css已經宣佈所以你可以忽略它。

來源

2013-03-13 15:38:41

這是我使用的方法。我認爲它是最簡單的，並且符合基金會的語義哲學。 – 2013-06-24 16:31:03

這也是我所走的路線。如果它是全寬頁眉或頁腳，我只需將該行放在頁眉/頁腳內。如果全寬度行是常見現象，儘管這是最佳路線。 – alexbooots 2013-08-23 18:42:34

預期行爲的更好答案 – iwalktheline 2015-08-19 19:41:43

使用「節」爲：

<section> 
    <div class="row"> 
    <div class="small-12 columns"> 
    </div> 
    </div> 
</section>

然後，分配一個ID的部分，並使用你的背景。

來源

2013-06-10 21:05:15 Troy

-5

是，只要使用這樣的：

<div class="large-12 columns"> 

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2> 

    </div>

來源

2013-11-06 09:01:18 Chris

這不起作用 – 32423hjh32423 2014-01-12 17:47:46

只是覆蓋max-width財產max-width: initial;，例如，

.fullWidth { 
     width: 100%; 
     margin-left: auto; 
     margin-right: auto; 
     max-width: initial; 
    } 

<div class="row fullWidth"> </div>

這個工作對我來說:)

來源

2014-04-15 08:52:45

我知道已經有很多答案，但是我認爲如果有人使用Foundation 5，並且偶然發現了這個問題（和我一樣），我有一些新的東西可以添加到這個主題中。

由於Foundation正在使用REM單元，因此最好使用它們更改.row類，並添加額外的類，以便只能選擇全行寬的行。例如，通過使用.full類：

.row.full { 
    max-width: 80rem; /* about 90rem should give you almost full screen width */ 
}

你可以看到，它甚至在Zurb基金會的文檔頁面中使用這樣的（他們改變.row類，雖然）：http://foundation.zurb.com/docs/（只是看看網頁源代碼）

來源

2014-07-06 10:59:46 wasil

只需設置

$row-width: 100%;

http://foundation.zurb.com/forum/posts/927-full-width-layouts

來源

2014-09-03 11:05:50 Philip

這是關於基金會5.迄今爲止所給出的答案都沒有提供邊緣到邊緣的全寬度。這是因爲內部.columns添加了填充。

要獲得真正的邊緣到邊緣全寬度內容，請將其添加到CSS中。

.row.full { width: 100%; max-width: 100%; } 
.row.full>.column:first-child, 
.row.full>.columns:first-child { padding-left: 0; } 
.row.full>.column:last-child, 
.row.full>.columns:last-child { padding-right: 0; }

只需.full類添加到您要延長全寬度的.row。

<div class="row full"> 
    <div class="medium-6 column">This column touches Left edge.</div> 
    <div class="medium-6 column">This column touches Right edge.</div> 
</div>

來源

2014-12-10 11:38:02 timofey

如果您使用頂嘴，這是一個更好的辦法：

<div class="row full-width"></div> 

.row{ 
    &.full-width{ 
     width: 100%; 
     max-width: 100%!important; //might be needded depending on your settings 
     &>.column:first-child, 
     &>.columns:first-child{ 
      padding-left: 0; 
     } 
     &>.column:last-child, 
     &>.columns:last-child{ 
      padding-right: 0; 
     } 
    } 
}

來源

2015-06-18 10:23:11

基金會6支持此功能自然地row expanded。代碼示例：

<div class="expanded row"> 
    ... 
</div>

來源

2016-12-13 06:32:43 elicohenator

zurb基礎是否有可能具有全行寬度

回答

相關問題