文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 2列，2后台扩展

问Bootstrap 2列，2后台扩展
EN

Stack Overflow用户

提问于 2016-09-14 19:58:03

回答 2查看 81关注 0票数 1

我正在尝试获得一个包含两个具有不同background-color的列的container，并且我希望每一列的background都扩展到它们自己的container之外。

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

CodePen Example

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

html

css

twitter-bootstrap

background

multiple-columns

回答 2

Stack Overflow用户

发布于 2017-08-25 04:55:56

来自Paulie_D's comment (2016年9月14日)：

我更喜欢宽度为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>

票数 1

Stack Overflow用户

发布于 2016-09-14 20:50:13

以后会让你很头疼的。

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

当您到达较大的断点时(列是并排的，行的宽度是固定的)，并且您希望左侧的灰色一直到左侧，右侧的绿色一直到右侧，您可以使用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>或其他包装器，如果您不想将其应用于整个正文的话。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39489891

复制

相似问题

问Bootstrap 2列，2后台扩展
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 2列，2后台扩展EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 2列，2后台扩展
EN