将引导容器背景扩展到页面边缘 [英] Extending a bootstrap container background to the edge of the page

问题描述

我正在设计一个基于 Bootstrap 3 的页面，我想尝试重新创建以下设计:

我将段落放入容器，以便它们在调整大小时保持在页面的中心.但是，我希望某些行具有彩色背景，尽可能地向两侧延伸，如图所示.我不确定这是否可能?

我尝试过的一种方法是为那些行切换到 container-fluid 类，它会到达屏幕的边缘.这种工作，但我不确定是否可以在调整页面大小时让里面的文本与其他段落保持一致?实际上，对于所有文本块，文本的左右边距应该始终保持一致.

我认为我不需要边距区域中的内容，因此如果解决方案仅涉及使用标准容器来保存内容，以及将背景扩展到侧面的另一种方法，那可能会奏效.

这是一个开始使用的 JSFiddle，包括 container-fluid，演示该方法.

解决方案

我不确定这是否是最佳"解决方案，但它仍然是一个解决方案.

• 为每个彩色框创建一个伪元素(:before)
• 绝对定位(相对于彩色框 - Bootstrap 已经设置了 position: relative on col-*-*).
• 将顶部和底部值设置为 0，这样它始终是正确的高度
• 设置背景颜色以匹配框
• 给它一个较宽的宽度，以确保它始终覆盖宽屏幕上的装订线(.container 的侧面)
• 左侧框设置left:-[伪元素宽度]，右侧框设置right:-[伪元素宽度
>
• 最后，您需要一个设置为 overflow: hidden 的页面容器.

HTML

<div class="容器">...

CSS

#page {溢出:隐藏；}.box-left:之前，.box-right:before {内容: '';显示:块；位置:绝对；宽度:999em；顶部:0；底部:0；}.box-left:before {左:-999em；背景:橙色；}.box-right:before {右:-999em；背景:浅蓝色；}

演示

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:

I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?

One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.

I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.

Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.

解决方案

I'm not sure if this is the 'best' solution, but it is a solution nonetheless.

• Create a pseudo element for each coloured box (:before)
• Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
• Set top and bottom values to 0 so it's always the correct height
• Set background colour to match box
• Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
• For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
• Finally, you'll need a page container set to overflow: hidden.

HTML

<div id="page">
    <div class="container">
        ...
    </div>
</div>

CSS

#page {
    overflow: hidden;
}    

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

.box-left:before {
    left: -999em;
    background: orange;
}

.box-right:before {
    right: -999em;
    background: lightblue;
}

DEMO

这篇关于将引导容器背景扩展到页面边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！