在容器外部扩展引导行

时间：2017-02-02 12:17:18

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

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

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

enter image description here

7 个答案:

答案 0 :(得分：4)

一种选择是使用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://www.codeply.com/go/C80RYwhWrc

另一个选择是在内容.container-fluid后面使用绝对位置.container（全宽）作为＆＃34;鬼＆＃34; ... 

.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）

类似问题：
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

答案 1 :(得分：1)

以下是解决方案的变体。您需要创建绝对定位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

答案 2 :(得分：0)

我没有真正理解你的意思。这就是我认为你的意思。

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

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

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

答案 3 :(得分：0)

您可以使用以下代码：

<!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>

答案 4 :(得分：0)

在元素上，添加以下CSS：

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

答案 5 :(得分：0)

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

f <- c('12', '24', '36', '48', '60')
for(i in f){
   # // construct the object name
   nm1 <- paste0('verifdata', i)
   # // get the value of object
   tmp <- get(nm1)
   # // find the location of the columns
   i1 <- match(c("StormTotalSnow", "SnowAmt05PrcntlF"), names(tmp))
   # // change the names to new names
   names(tmp)[i1] <- paste0(c("StormTotalSnow", "SnowAmt05PrcntlF"), i)
   # // assign to update the objects in global env
   assign(nm1, tmp)

   }

答案 6 :(得分：0)

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

.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>

相关问题
最新问题