在容器外部延伸引導行

我們在我們的網站上使用引導程序3，並且我對新模板的請求有一些設計，其中某些元素並不真正遵循引導程序網格。我試圖讓它工作，但沒有成功。在容器外部延伸引導行

我試圖解釋下圖中的問題。任何人都有我如何解決這個問題的想法？

2017-02-02 iixi

@ ZimSystem是的，綠色的容器在紅色行的上面和下面都有行。 – iixi

@ZimSystem不能記得我嘗試過的東西。和不同的html結構之間。我試過行流體，但不能得到行內的內容與頁面的「主」容器一起工作 – iixi

您可以使用，將在高度調整與col-lg-6沿CSS僞元素..

#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

類似問題：
Get Two Columns with different background colours that extend to screen edge
Example with images

來源

2017-02-02 12:38:14 ZimSystem

謝謝你完全按照我的意願去做！ – iixi

以下是解決方案的變體。您需要創建絕對定位的div，包括它變成col-xs-6，但是這個容器應該有position: static 至於屏幕寬度1200像素和多個容器寬度1170px，就可以計算出填充左浮動的div：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

來源

2017-02-02 12:40:07 Banzay

這裏的問題在於你的綠色盒子的內容最終會在紅色容器外面 – iixi

我改變了答案。看一看。 – Banzay

謝謝！你的答案和ZimSystem似乎都有效 – iixi

我沒有真正明白你的意思。這是我認爲你的意思。

<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

來源

2017-02-02 12:54:27 JayJay95

您可以使用此代碼如下：

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

來源

2017-02-02 13:10:54 KiranPurbey

在容器外部延伸引導行

回答

相關問題