Bootstrap 网格 - 半流体，半正常容器布局

Question

我需要一些帮助来构建布局。查看所需布局的图像。绿色区域显示轮播，而蓝色区域不属于轮播。

在这个布局中，绿色区域与屏幕左侧对齐并且蓝色区域保持包含在容器中很重要，否则我可以轻松使用容器流体类。

那么，有人对此有一个简单的答案吗？

Answer 1

这适用于一半流体，一半不是。在我的情况下，我想要左半部分的地图，一直到浏览器边缘，最终将成为右侧的联系表单，但不超过标准container类宽度。

HTML

<div class="container-fluid relative">
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 absolute left-half" style="background-color: #E2F1FC; height: 400px">
                        <div id="map-canvas"></div>
                    </div>
                    <div class="col-sm-6 col-sm-offset-6">
                        <p>
                            Duis at hendrerit erat, non interdum urna. Praesent metus odio, laoreet sed ultrices et, egestas
                            non erat. In tincidunt et purus a convallis. In hac habitasse platea dictumst. Aenean turpis
                            justo, lobortis ac gravida et, sagittis eu est. Pellentesque habitant morbi tristique senectus
                            et netus et malesuada fames ac turpis egestas. Duis convallis est et placerat gravida. Cras quis
                            quam vestibulum, mollis sapien a, mollis libero. Donec ut massa ultricies, porttitor erat quis,
                            pretium massa. Donec placerat egestas pulvinar.
                        </p>

                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.left-half{
    left: 0;
    right: 50%;
}

这是小提琴https://jsfiddle.net/JohnHalsey/z3menav7/2/

如果您希望它在移动设备上堆叠，您可以轻松添加媒体中断。