在容器外部扩展引导行 [英] Extend bootstrap row outside the container

问题描述

我们在我们的网站上使用Bootstrap 3，并且我已经收到了一个新模板的请求，其中有一些设计中的某些元素并不真正遵循引导程序网格。我试图让它工作，但没有成功。

我试图在下面的图片中解释问题。任何人都知道如何解决这个问题？

解决方案

一个选项是使用CSS伪 :: before 元素，它将随着 col-lg-6 ..

  #main {
 background：lightgreen ; 
身高：100vh; 
} 
 
 #main> .row {
 height：100vh; 
} 
 
 .left {
 background：red; 
职位：亲属; 
 top：50％; 
 transform：translateY（-50％）; 
} 
 
 .left：之前{
 left：-999em; 
背景：红色; 
内容：''; 
 display：block; 
位置：绝对; 
 width：999em; 
 top：0; 
 bottom：0; 
} 
< div class =containerid =main> 
< div class =row> 
< div class =col-lg-6 left> 
 .. 
< / div> 
< / div> 
< / div> 
  

http://www.codeply.com/go/C80RYwhWrc

---

另一种选择是在内容 .container 后面使用绝对位置 .container-fluid （全角）作为ghost...

  .abs {
 position：absolute; 
 right：0; 
 top：0; 
 bottom：0; 
 z-index：1; 
} 
 
< div class =container> 
< div class =row> 
< div class =col-sm-6> 
< h4>内容< / h4> 
< / div> 
< div class =col-sm-6> 
 <！ - 图片空间 - > 
< / div> 
< / div> 
< / div> 
< div class =container-fluid abs> 
< div class =row h-100> 
< div class =col-sm-6 h-100> 
<！ - 空分隔符 - > 
< / div> 
< div class =col-sm-6 right> 
< img src =// placehold.it/1000x400\"> 
< / div> 
< / div> 
< / div> 
  

https://www.codeply.com/go/txUHH72f16 （Bootstrap 4）

---

< 类似问题：

获取具有延伸到屏幕边缘的不同背景颜色的两列

图像示例

将元素扩展到引导容器之外

We are using Bootstrap 3 on our site and I've got a request on a new template with a design which have some elements that doesn't really follow the bootstrap grid. I've tried to get it to work but haven't succeeded.

I've tried to explain the problem in the image below. Anyone have an idea of how I can solve this?

解决方案

One option is to use a CSS pseudo ::before element that will resize in height along with the col-lg-6..

#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;
}
<div class="container" id="main">
    <div class="row">
        <div class="col-lg-6 left">
            ..
        </div>
    </div>
</div>

http://www.codeply.com/go/C80RYwhWrc

---

Another option is to use an absolute position .container-fluid (full-width) behind the content .container that acts as a "ghost"...

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

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="//placehold.it/1000x400">
        </div>
    </div>
</div>

https://www.codeply.com/go/txUHH72f16 (Bootstrap 4)

---

Similar questions:
Get Two Columns with different background colours that extend to screen edge
Example with images
Extend an element beyond the bootstrap container

这篇关于在容器外部扩展引导行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！