Html 带图形背景的引导全宽部分

我正在尝试从我的图形设计师那里实现一个设计，虽然看起来很酷，但这让我有些头疼，因为我不知道如何在引导中实现

我们有一个“行动号召”部分，它与左右两端的12列网格系统对齐

它还延伸到视口边缘：

在左侧，红色背景一直延伸到视图端口边缘

在右边，我们有一个灰色背景图像，一直延伸到视图端口边缘

我还没有找到一个搜索词来搜索我想要实现的目标，更不用说从哪里开始了（除了让cta使用整个宽度的背景，然后在顶部覆盖一个左元素）

关于如何在bootstrap中编码下面的图形布局，您有什么想法吗

<section class="cta" style="background: grey; position: relative">
    <div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
    <div class="text-outer">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">left</div>
                <div class="col-xs-6">right</div>               
            </div>
        </div>
    </div>      
</section>

左边
正确的

以

为起点；我在猜测你的页面布局。让我们试试这个：

见下文：

.cntn{
边框：1px红色实心；/*您可以删除此边框（不需要）*/
}
瑞德先生{
背景色：红色；
文本对齐：右对齐；
边距：0；/*可选*/
宽度：100px；/*根据需要调整*/
浮动：左；
}
.cta{
边距：0；/*可选*/
浮动：对；
边框：1px纯绿色；/*您可以删除此边框（不需要）*/
}

行动
左边
正确的

像这样的东西？其中黑色应该是灰色渐变，

最大宽度：400px

可以是任何颜色

.cta{
溢出x：隐藏；
职位：相对
}
.text外部容器{
宽度：100%；
最大宽度：400px；
背景：灰色；
z指数：2；
位置：相对位置；
}
.文本：之前，
.文本：在{
内容：“；
位置：绝对位置；
宽度：50%；
身高：100%；
排名：0；
}
.文本：在{
背景色：红色；
左：0；
}
.文本：在{
背景色：黑色；
右：0；
}

左边
正确的

只需将“div class=“container”更改为“div class=“container fluid”

使用

class=“container fluid”

而不是

class=“container”

，然后使用此样式：

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}

我创建了3个div作为左中心和右中心，但是如果你想使用左中心，那么就创建你自己的类。也许下面的方法行得通

.custom {
    width:calc(100% - (50% - 768px/2));
}

.custom {
    width:calc(100% - leftCellWidth);
}

---

您可以根据十六进制图像的高度设置左侧的高度。

使用

jumbotron

类以外的类

容器

作为全宽，如前所述

HTML:

---

所有的div都应该被包装在container div中。正如其他人所建议的：container fluid有帮助。 在容器流体中，您可以为其余内容添加常规容器。下面的代码解释了这一点

您可以采取简单的方法，只需将您发布的整个cta图像作为一个可点击图像，并在col-xs-12中使用.img responsive。在这种情况下，我的修复大约需要2分钟：

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img src="/img/cta.jpg" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="container">
                    <!-- All you other content here-->
                </div>
            </div>
        </div>
    </div>
</section>

但您也可以将设计破解成COL，正如我在下面的代码片段中尝试展示的那样。当然，你需要自己调整和决定确切的尺寸

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 red">
                <img src="/img/hexagon.png" class="img-responsive pull-right">
                <!--and give this img a negative margin to flow over to the grey area-->
            </div>
            <div class="col-xs-1 grey-image"></div>
            <div class="col-xs-3 grey-image">
                <h3 class="text-center">Call to action</h3>
                <p class="text-center">Discount etcetera</p>
            </div>
            <div class="col-xs-5 grey-image">
                <button class="btn center-block">Request quote</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <!-- All you other content here-->
                </div>
            </div>
        </div>
    </div>
</section>

行动呼吁
折扣等

请求报价

问题是什么？不清楚您想做什么，但有一件事，任何

col md-

div都需要用

.row

包装。非常抱歉，这是漫长的一天，修复了，现在正在包装cols-我正在尝试实现bootstrap中问题中发布的图像。。。这是一个调用操作部分的页面区域。在帮助您之前，我们可能需要查看更多HTML。。。现在（对我来说）还不清楚你做了什么，缺少了什么（或者不起作用）@g18c CSS是完全需要的，你有一个样式表而不是bootstrap？谢谢你花时间发布ochi，不太清楚如果你能看到我原来问题中的图像，你会看到左边的六边形。这应该与12列网格的第一列对齐。然后，红色条（六边形是其中的一部分）会一直流到边缘（如果浏览器视口拉伸得很宽，则边缘可能会很远）。剩余的灰色图形会一直流到浏览器视口的右侧，一直流到边缘。对不起，没有-我不明白你的意思。你能给我的原始问题贴一封邮件吗？也许我能更好地理解你。六边形延伸得很宽，因为您添加了10%的硬宽度（因此屏幕越大，间隙越宽），而六边形图像的大小可能有限。这只是猜测，因为我们没有所需的所有代码。发布后，有人会很快给出答案：）覆盖

。container fluid

会导致整个页面出现灾难性故障。也许你需要更好地解释你想做什么，或者更好地理解container fluid做什么，而不是给我一个负号。这是一个你可以看到的例子。无论如何，谢谢兄弟。

。容器流体

是您在整个引导页面中使用的东西。在后面的部分中，用

填充

之类的更改来覆盖这些内容，在某些情况下可能会破坏网站。我没有给你一个负号，我给了你一个负号。因此，寻找解决方案的人不会尝试这样的事情。我也不一定要这么做

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img src="/img/cta.jpg" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="container">
                    <!-- All you other content here-->
                </div>
            </div>
        </div>
    </div>
</section>

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 red">
                <img src="/img/hexagon.png" class="img-responsive pull-right">
                <!--and give this img a negative margin to flow over to the grey area-->
            </div>
            <div class="col-xs-1 grey-image"></div>
            <div class="col-xs-3 grey-image">
                <h3 class="text-center">Call to action</h3>
                <p class="text-center">Discount etcetera</p>
            </div>
            <div class="col-xs-5 grey-image">
                <button class="btn center-block">Request quote</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <!-- All you other content here-->
                </div>
            </div>
        </div>
    </div>
</section>