Boostrap .container 具有全宽背景，从中间拆分?

the

关注

发信

关注(28)粉丝(399)

Boostrap .container 具有全宽背景，从中间拆分?

本文介绍了Boostrap .container 具有全宽背景，从中间拆分?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有什么方法可以使用 .container 然后在里面有一个拆分的 2 列布局，其中各列具有不同的背景颜色并一直延伸到页面的左侧和右侧?

以下正确居中并分成两列，但每列的背景也被裁剪到容器的宽度.


<div class="col-sm-6"><p>左边的内容放在这里.</p>
<div class="col-sm-6"><p>正确的内容放在这里.</p>

图像比文字更有效:

解决方案

HTML


<div class="容器"><div class="row"><div class="col-md-6"><div class="gray-box"><p>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Aliquam beatae quod quaerat nostrum ullam animi ea repelendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?</p>

<div class="col-md-6"><p>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Aliquam beatae quod quaerat nostrum ullam animi ea repelendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?</p><p>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Aliquam beatae quod quaerat nostrum ullam animi ea repelendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?</p>

CSS

.container-holder{溢出:隐藏；背景:白色；}.灰盒{背景:灰色；填充:0 15px 9999px 9999px；边距:0 -15px -9999px -9999px;}

jsfiddle 演示

Is there any way to use a .container and then inside have a split 2 column layout where the columns have different background colors and reach all the way to the left and right of the page?

The following correctly centers and splits into two columns, but the backgrounds of each are also cropped to the width of the container.

<div class="container">
  <div class="col-sm-6">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6">
    <p>Right content goes here.</p>
  </div>
</div>

Images work better than words:

解决方案

HTML

<div class="container-holder">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="gray-box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
                 <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.container-holder{
    overflow: hidden;
    background: white;
}
.gray-box{
    background: gray;
    padding: 0 15px 9999px 9999px;
    margin: 0 -15px -9999px -9999px;
}

jsfiddle DEMO

这篇关于Boostrap .container 具有全宽背景，从中间拆分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-12 14:00