Bootstrap 2列，2个背景扩展答案

【问题标题】：Bootstrap 2 columns, 2 background extendedBootstrap 2列，2个背景扩展
【发布时间】：2016-09-14 11:58:03
【问题描述】：

我正在尝试获得一个container，其中两列具有不同的background-colors。我希望每列的background 延伸到它们自己的container 之外。

我试过这个，但我不知道这是否是正确的答案；我应该使用overflow: hidden吗？

#skills {
    color: #FFFFFF;
}

#skills-box {
    background-color: #1a1a1a;
    padding-right: 130px;
}

#skills-box, #time-box {
    min-height: 300px;
}

#skills-box:before,
#time-box:before {
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

#skills-box:before {
    left: -999em;
    background: #1a1a1a;
}

#time-box:before {
    right: -999em;
    background: #ccca14;
}

h2 {
    font-size: 40px;
}

#time-box {
    background-color: #ccca14;
}

<div class="container" id="skills">
    <div class="row">
        <div class="col-md-8" id="skills-box">
            <h2>Compétences</h2>

            <!-- skills bar in JS here -->
        </div>
        <div class="col-md-4" id="time-box">
            <h2>Je suis dans le web depuis:</h2>
            <p id="dev-time">

             <!-- dev time in JS here -->
            </p>
        </div>
    </div>
</div>

【问题讨论】：

谢谢你，overflow-x: hidden 似乎是个好主意，它对我有用！ :)

标签： html css twitter-bootstrap background multiple-columns

【解决方案1】：

来自Paulie_D's comment（2016 年 9 月 14 日）：

除非你可以计算伪元素的宽度，否则你肯定需要在 body 上使用overflow-x: hidden。我更喜欢100vw的宽度而不是999em，但效果是一样的：

body {
  overflow-x: hidden;
}

#skills {
    color: #FFFFFF;
}

#skills-box {
    background-color: #1a1a1a;
    padding-right: 130px;
}

#skills-box, #time-box {
    min-height: 300px;
}

#skills .col-md-8:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(25vw);
    top: 0;
    bottom: 0;
    z-index: -1;
}

#time-box:before {
    content: '';
    display: block;
    position: absolute;
    width: 100vw;
    top: 0;
    bottom: 0;
    z-index: -1;
}

#skills .col-md-8:before {
    right: 100%;
    background: #1a1a1a;
}

#time-box:before {
    left: 0;
    background: #ccca14;
}

h2 {
    font-size: 40px;
}

#time-box {
    background-color: #ccca14;
}

<div class="container" id="skills">
    <div class="row">
        <div class="col-md-8" id="skills-box">
            <h2>Compétences</h2>

            <!-- skills bar in JS here -->
        </div>
        <div class="col-md-4" id="time-box">
            <h2>Je suis dans le web depuis:</h2>
            <p id="dev-time">

             <!-- dev time in JS here -->
            </p>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

你真的应该在你的身体和容器上使用背景颜色来处理这样的事情，而不是弄乱引导程序的列宽和溢出。这会让你很头疼。

由于您使用断点来堆叠列，因此您可以为正文或围绕内容的其他包装器指定纯色背景色，并确保您的行是全宽的。

当您到达较大的断点时（您的列并排且您的行具有固定宽度），并且您希望左侧的灰色一直到左侧并且绿色一路向右，你可以通过CSS背景渐变获得一点创意来实现你所追求的。

例如，这是一个应用于身体的渐变，半灰半绿。你的内容可以直接放在它上面，如果它的左栏有灰色背景，右栏有绿色背景，它将达到你想要的效果，而不会影响你的栏目：

body {    
    background: -moz-linear-gradient(left, #1a1a1a 0%, #1a1a1a 50%, #ccca14 50%, #ccca14 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1a1a1a 0%,#1a1a1a 50%,#ccca14 50%,#ccca14 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1a1a1a 0%,#1a1a1a 50%,#ccca14 50%,#ccca14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#ccca14',GradientType=1 ); /* IE6-9 */
}

如果您不想将其应用于整个主体，则可以将相同的逻辑应用于 100% 宽度 <section> 或其他包装器。

您只需要实现类似的东西并适应您的断点。

【讨论】：