在兩列內製作全寬背景色（Bootstrap3）

幾個星期前，我在Bootstrap上有一個項目。在代碼和圖像（繪製瘋狂技能）中看到的設計（.psd）需要在兩列中的一列（其已經在容器內）中使用全寬度（「容器流體」狀）背景色。在兩列內製作全寬背景色（Bootstrap3）

<div class="container"> 
<div class="col-xs-3"> 
     <div class="left-menu"> 
      *content* 
     </div> 
    </div> 
    <div class="col-xs-9"> 
     <div class="content"> 
      <div class="text"> 
       *bla-bla-bla* 
      </div> 
      <div class="full-width-background-color"> 
       *content* 
      </div> 
     </div> 
    </div> 
</div>

我解決它通過使左菜單+一塊右部和在分開的容器灰色的背景塊，加入邊距：-100％到左邊的菜單和添加COL-XS -offset-3到每個正確的部分。

.left-menu { 
margin-bottom: -100%; 
} 

<div class="container"> 
    <div class="col-xs-3"> 
     <div class="left-menu"> 
      *content* 
     </div> 
    </div> 
    <div class="col-xs-9 col-xs-offset-3"> 
     <div class="content"> 
      <div class="text"> 
       *bla-bla-bla* 
      </div> 
     </div> 
    </div> 
</div> 

<div class="full-width-background-color"> 
    <div class="container"> 
     <div class="col-xs-9 col-xs-offset-3"> 
      *content* 
     </div> 
    </div> 
</div>

我真的不認爲這是處理這種情況的正確方法。什麼纔是完成這項任務最正確的方法？

來源

2017-04-20 ndvr

這是我會怎麼做它：

[relative] { 
 
    position: relative; 
 
} 
 

 
[relative] .col-xs-9 { 
 
    position: static; 
 
} 
 

 
[absolute] { 
 
    left: 0; 
 
    width: 100%; 
 
    min-height: inherit; 
 
    position: absolute; 
 
    background-color: gainsboro; 
 
    z-index: -1; 
 
} 
 

 
/* you don't need what's below, it's only for SO, as you didn't add yours */ 
 

 
.left-menu { 
 
    background-color: green; 
 
    min-height: 80vh; 
 
} 
 

 
.content>* { 
 
    min-height: 30vh; 
 
    margin: 5vh 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container-fluid" relative> 
 
    <div class="container"> 
 
    <div class="col-xs-3"> 
 
     <div class="left-menu"> 
 
     *content* 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-9"> 
 
     <div class="content"> 
 
     <div class="text"> 
 
      *bla-bla-bla* 
 
     </div> 
 
     <div class="full-width-background-color"> 
 
      <div absolute></div> 
 
      *content* 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2017-04-20 21:39:40

在兩列內製作全寬背景色（Bootstrap3）

回答

相關問題