Bootstrap 3:将div扩展到右侧的容器外部

时间:2015-01-01 20:00:46

标签: javascript jquery html css twitter-bootstrap

我正在尝试制作一个需要div的布局,将其扩展到仅在右侧的.container div之外。

这是小提琴:http://jsfiddle.net/krish7878/c5n365ek/1/

HTML代码:

<div class="container">
    <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-6 left">
           Left Container
        </div><!-- /.col-6 -->
        <div class="col-lg-6 col-md-6 col-sm-6 right">
            Right Container
        </div><!-- /.col-6 -->
    </div><!-- /.row -->
</div><!-- /.container -->

CSS代码:

.left{
    background-color: #999;
    height: 50px;
    padding: 30px 0px;
}
.right{
    background-color: #49c8ff;
    height: 50px;
    padding: 30px 0px;
}

我希望蓝色背景的正确容器在右侧完全展开。

1 个答案:

答案 0 :(得分:2)

这是你在找什么?您只需制作.container width:100%即可添加padding-left

.container{
  width: 100%;
  padding-left: 120px; //whatever you want
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

FIDDLE