如何將引導行擴展到其容器之外？

將Bootstrap 行擴展到容器之外

問題描述

Bootstrap 的網格系統提供了一種創建響應式佈局的便捷方法。但是，在某些情況下，您可能會遇到需要元素超出容器寬度的情況。這可能會為實現所需設計帶來挑戰。

解

選項1：使用CSS 偽元素

使用下列指令建立偽::before 元素超出容器寬度的負左偏移量。該元素將充當間隔物，將目標元素推到容器之外。

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

選項2：使用絕對定位容器

使用容器流體絕對定位延伸到主容器後面的螢幕邊緣，充當「幽靈」

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

其他資源

• [Codeply 示範（選項1)](http://codeply.com/go/C80RYwhWrc)
• [ Codeply 示範（選項2)](https://codeply.com/go/txUHH72f16)
• [相關範例：取得延伸到螢幕邊緣的不同背景顏色的兩列](https://stackoverflow.com/a/ 35627548)

以上是如何將引導行擴展到其容器之外？的詳細內容。更多資訊請關注PHP中文網其他相關文章！