Bootstrap 3 - 将区域对齐到.container内的列,大小到视口的边缘

Question

有一个设计要求,我不能为我的生活工作.请考虑此图像显示具有12列布局的引导网格:

3个黑色矩形代表:

1. 一列填充
2. 主要内容区域
3. 互动地图

科3是问题; 它需要与内部的网格系统完美对齐.container,并且一直到屏幕边缘而不会溢出.由于部分1+ 2不添加最多6列,我很难调整部分3.

我还没有设法提出任何可行的解决方案 - 最接近(仍然相当远)是在网格系统上使用伪元素 - 唯一的问题是它不可能将地图放在一个伪元素.

请注意我暂时已经有了JavaScipt解决方案,我正在寻找一种仅限CSS/HTML的解决方案来减少页面加载时的闪烁.

---

正如所要求的,这里有一些我希望将使请求更清晰的图像.

之前 - 地图与视口边缘之间存在间隙:

后映射与固定宽度引导网格和视口边缘对齐:

---

一些伪代码

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-3 col-lg-offset-1">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
</div>

Answer 1

希望这支笔会有所帮助.

我在地图列中添加了负右边距以补偿变量容器间隙.它以这种方式计算:( calc((100vw - @container)/2*-1)每个bootstrap断点的窗口宽度和容器宽度之差的一半).

不幸的是100vw包括滚动条宽度,因此如果页面内容高于窗口高度,则会出现烦人的水平滚动条.我用overflow-x:hidden;div 包装了容器,所以它只是在地图的右侧隐藏了额外的~20px.我想在你的特殊情况下它是可以的,因为标准的谷歌地图在它的右侧和有用的控件之间有足够的空间.