Bootstrap - 具有两列的容器流体.右侧需要限制 [英] Bootstrap - Container-fluid with two columns. Right side needs to be confined

问题描述

我需要在引导程序中有一个部分，其中一行有两列(6 和 6).

左侧的 6 列 div 需要具有流体效果，其中包含拉伸到浏览器窗口的左边缘.

右侧的 6 列 div 需要其内容匹配/保持在页面其他部分的右侧范围内，这些部分具有正常(非流体)容器类(宽度为 1170 像素).

我怎样才能最好地达到这种效果?

解决方案

这是针对 1170px 宽的容器，您需要对其余尺寸进行媒体查询.希望有所帮助.

CSS:

.stretch-left {margin-left: calc((100vw - 1170px)/-2);}

HTML:

<div class="row"><div class="col-md-6stretch-left">内容
<div class="col-md-6">内容

I need a section in bootstrap where there are two columns (6 and 6) in a row.

The left 6 column div needs to have the fluid effect where its contains stretch to the browser window's left edge.

The right 6 column div needs its contents to match/be kept within the right-side confines of the other sections of the page that have a normal (non-fluid) container class (which has a width of 1170px).

How can I best achieve this effect?

解决方案

This is for 1170px wide container, you need media queries for the rest of the sizes. Hopefully helps.

CSS:

.stretch-left {
    margin-left: calc((100vw - 1170px) / -2);
}

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-6 stretch-left">
            content
        </div>
        <div class="col-md-6">
            content
        </div>
    </div>
</div>

这篇关于Bootstrap - 具有两列的容器流体.右侧需要限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！