CSS/BOOTSTRAP：使網格內的元素（.container/.row）全（屏）寬

所以我有一個網站結構...CSS/BOOTSTRAP：使網格內的元素（.container/.row）全（屏）寬

body 
---- main.container 
--------- div.row 
-------------- div.content

我注入自帶一些內容的內容元素中從CMS ..

一切工作正常...但後來有一個模塊裏面全（屏幕寬度），所以.container外面走了需求 - 右邊緣

所以在內容最後看起來像這樣：

body 
---- main.container 
--------- div.row 
-------------- div.content 
-------------------- div.col-xs-12.module1 
-------------------- div.col-xs-12.module2 
-------------------- div.full-width.module3 
-------------------- div.col-xs-12.module4

現在，。全寬類來實現真正全屏我去的位置是：絕對的，像這樣的

.full-width{ 
    position: absolute; 
    left: 0; 
    width: 100%; 
}

的問題是，很明顯的位置是：絕對從流中刪除元素，然後.module4出現在.module2和.module3之後。

現在，什麼纔是正確實現這一目標的最佳方法？

需要考慮的事情：

全寬模塊沒有一個固定的高度，可能是什麼，並取決於內部
內容我沒有確切的利潤包裝的/填充要素（內容/行）......因爲它可以更嵌套，並再沒有
保證模塊.row的直接子.....所以切緣陰性是行不通的

任何想法？

來源

2016-10-12 DS_web_developer

[將其拆分成單獨的「容器」]（http：// stackov erflow.com/a/29073082/3585500）？ – ourmandave

你是什麼意思？我不能，包裝的應用程序已經存在...內容注入與ajax API調用，一切都加載後 –

我不能讓我的頭你的問題。你希望.full-width也是100％？只需添加一個.col-xs-12類，它也可以像其他的一樣寬。通過Bootstrap的工作方式以及您提供的示例，很難確定如何執行此操作。你可以在codepen中刪除一個例子嗎？ – PeterS

如果您想要一個全寬度的行，您必須使用bootstrap documentation中指定的.container-fluid類。

所以，你的網站結構應該看：

body 
---- main 
--------- div.container 
-------------- div.row 
------------------- div.col-xs-12.module1 
------------------- div.col-xs-12.module2 
--------- div.container-fluid 
-------------- div.row 
------------------- div.full-width.module3 
--------- div.container 
-------------- div.row 
------------------- div.col-xs-12.module4

編輯

如果你不能改變你的HTML結構（IE11 +）：

.full-width { 
    width: 100vw; 
    margin-left: -50vw; 
    left: 50%; 
}

演示：http://www.bootply.com/tVkNyWJxA6

來源

2016-10-12 15:33:01 Seb33300

如果我可以改變佈局，我會...但我不能改變任何上面.content（在我的例子中） –

我編輯了我的答案 – Seb33300

由於某種原因，我的行總是被切成兩半：/和前半部分是左在屏幕之外...您的示例雖然在bootply中運行 –

CSS/BOOTSTRAP：使網格內的元素（.container/.row）全（屏）寬

回答

相關問題