在容器外扩展引导行答案

【问题标题】：Extend bootstrap row outside the container在容器外扩展引导行
【发布时间】：2021-06-24 01:10:42
【问题描述】：

我们在我们的网站上使用 Bootstrap 3，我收到了一个关于新模板的请求，该模板的设计包含一些不真正遵循引导网格的元素。我试图让它工作但没有成功。

我已尝试在下图中解释问题。有人知道我该如何解决这个问题吗？

【问题讨论】：

@ZimSystem 是的，绿色容器在红色行的上方和下方都有行。
@ZimSystem 不记得我尝试过的事情。在不同的 html 结构之间来回更改。我试过行流，但无法让行内的内容与页面的“主”容器一起使用

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

一种选择是使用 CSS 伪 ::before 元素，该元素将与 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://codeply.com/go/C80RYwhWrc

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

.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://codeply.com/go/txUHH72f16（引导程序 4）

类似问题：
Get Two Columns with different background colours that extend to screen edge
Example with image right
Example with image left
Extend an element beyond the bootstrap container

【讨论】：

不是左边，你在右边怎么样？
@executable .. 正好相反。你see this了吗？
谢谢你救了我！

【解决方案2】：

这是一种解决方案。您需要创建绝对定位的 div，将其包含在 col-xs-6 中，但这个容器应该有 position: static 至于屏幕宽度1200px以上容器宽度1170px，可以计算浮动div的padding-left：padding-left: calc((100% - 1170px) / 2);

.blk {
    background: lightgreen;
    width: 50%;
    position: absolute;

}
.container {
    background: tomato;
    height: 100vh;
    padding: 40px 0;
}
@media only screen and (min-width: 1200px) {
 .cell {
    position: static;
 }
 .blk {
    left: 0;
    right: 50%;
    padding-left: calc((100% - 1170px) / 2);
 }
}

<div class="container">
<div class="row">
    <div class="col-lg-6 cell">
        <div class="blk">Lorem ipsum dolor</div>
     </div>
  <div class="col-lg-6">Lorem ipsum dolor</div>
</div>
</div>

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

【讨论】：

这里的问题是你的绿色盒子的内容最终会出现在红色容器之外
我已经改变了答案。看看吧。
谢谢！您的答案和 ZimSystem 似乎都有效

【解决方案3】：

如果您使用网格并将其绝对放置在主要内容的后面，则可以使背景网格与前景网格完全相同。然后，您可以使用伪元素定位图像以拉伸到屏幕边缘。

.first .stretch-right::after {
  background: url('https://i.picsum.photos/id/802/1920/1080.jpg?hmac=6P9kWTyEU0oX0KcmjlRcGZwNc5Jb27w2_qqtsqQz-fg') no-repeat;
}
.second .stretch-left::after {
  background: url('https://i.picsum.photos/id/802/1920/1080.jpg?hmac=6P9kWTyEU0oX0KcmjlRcGZwNc5Jb27w2_qqtsqQz-fg') no-repeat;
}
.stretch-right::after {
  content: '';
  background-size: cover !important;
  background-position: center center !important;
  right: 0;
  height: 100%;
  position: absolute;
  left: 0;
}
@media (min-width: 1140px){
  .stretch-right::after {
    right: calc((-1%) - ((100vw - 1140px) / 2));
  }
}
.stretch-left::after {
  content: '';
  background-size: cover !important;
  background-position: center center !important;
  right: 0;
  height: 100%;
  position: absolute;
  left: 0;
}
@media (min-width: 1140px){
  .stretch-left::after {
    left: calc((-1%) - ((100vw - 1140px) / 2));
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="position-relative py-5 first">
  <div class="position-absolute w-100 h-100">
    <div class="container h-100 bg-container">
      <div class="row h-100 d-flex justify-content-between align-items-center">
        <div class="col-12 col-md-5 h-100 d-flex"></div>
        <div class="col-12 col-md-6 h-100 d-flex stretch-right"></div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row d-flex justify-content-between align-items-center">
      <div class="col-12 col-md-5">
        <h1>
          Nullam dapibus neque id maximus
        </h1> 
        <p>
        Maecenas sollicitudin egestas convallis. Cras non congue ipsum. Suspendisse auctor, elit at lacinia pulvinar, quam ligula pulvinar mi, vitae ornare metus dolor non quam. Integer eget bibendum ligula. Pellentesque vel consectetur diam. In sagittis aliquam eros, at faucibus erat blandit id. Aliquam fringilla sagittis enim sed porta. Donec sed rutrum metus. Fusce nibh orci, tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
      </div>
      <div class="col-12 col-md-5 bg-white">
        <h3>
        I'll stay in the grid
        </h3>
        <p>
        tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
      </div>
    </div>
  </div>
</section>
<section class="position-relative py-5 second">
  <div class="position-absolute w-100 h-100">
    <div class="container h-100 bg-container">
      <div class="row h-100 d-flex justify-content-between align-items-center">
        <div class="col-12 col-md-6 h-100 d-flex stretch-left"></div>
        <div class="col-12 col-md-5 h-100 d-flex"></div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row d-flex justify-content-between align-items-center">
      <div class="col-12 col-md-5 bg-white">
        <h3>
        I'll stay in the grid
        </h3>
        <p>
        tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
      </div>
      <div class="col-12 col-md-5">
      <h1>
          Nullam dapibus neque id maximus
        </h1> 
        <p>
        Maecenas sollicitudin egestas convallis. Cras non congue ipsum. Suspendisse auctor, elit at lacinia pulvinar, quam ligula pulvinar mi, vitae ornare metus dolor non quam. Integer eget bibendum ligula. Pellentesque vel consectetur diam. In sagittis aliquam eros, at faucibus erat blandit id. Aliquam fringilla sagittis enim sed porta. Donec sed rutrum metus. Fusce nibh orci, tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
        
      </div>
    </div>
  </div>
</section>

【讨论】：

【解决方案4】：

我并没有真正明白你的意思。这就是我想你的意思。

<div class="container" style="width:1200px">
    <div class="row">
        <div class="col-lg-6">

        </div>
    </div>
</div>

演示：http://jsfiddle.net/jayjay95/ybx97y2c/
（如果这是您想要的，请将容器宽度 200px 更改为 1200px 并将 col-xs-6 更改为 col-lg-6。

【讨论】：

【解决方案5】：

在元素上，添加这个css：

width: calc(100% + 30px); //full width plus 15px padding on each side margin-left: -15px; //center element

【讨论】：

【解决方案6】：

这就是我解决问题的方法。我认为这会有所帮助。

#cont {
    background-color: #F8F9FA;
    position: relative;
}

#cont:before {
    left: calc((50vw - 50%) * -1);
    background: #F8F9FA;
    content: '';
    display: block;
    position: absolute;
    width: calc(50vw - 50%);
    top: 0;
    bottom: 0;
}

#cont:after {
    right: calc((50vw - 50%) * -1);
    background: #F8F9FA;
    content: '';
    display: block;
    position: absolute;
    width: calc(50vw - 50%);
    top: 0;
    bottom: 0;
}

【讨论】：

【解决方案7】：

您可以使用以下代码：

<!DOCTYPE html>
  <html class=" desktop landscape" lang="en">
  <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Example</title>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <style type="text/css">
        .side{background-color: lightgrey;

        }
        .middle{background-color: green;
        }
        .red{background-color: red;
            }
    </style>
    </head>
    <body>
        <div class="container-fluid">
            <!-- 1st section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
            <!-- 2nd section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 red" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <div class="row">
                        <div class="col-lg-6 col-lg-6 col-md-6 col-xs-6 col-sm-6 red">
                                <br><br><br><br><br><br><br><br><br><br>
                        </div>
                        <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
                                <br><br><br><br><br><br><br><br><br><br>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
            <!-- 3rd section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
        </div>  
    </body> 
</html>

【讨论】：