在两列内制作全宽背景色（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>

我真的不认为这是处理这种情况的正确方法。什么才是完成这项任务最正确的方法？

答

这是我会怎么做它：

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

在两列内制作全宽背景色（Bootstrap3）

相关推荐