如何将流体容器内容与引导网格对齐？ [复制]答案

【问题标题】：How to align fluid container contents with bootstrap grid? [duplicate]如何将流体容器内容与引导网格对齐？ [复制]
【发布时间】：2019-05-16 18:06:19
【问题描述】：

我正在尝试将容器流体的内容与引导程序中的另一个容器对齐。此图像显示了我希望它如何对齐，图像向左对齐，绿色背景向右对齐，以用于损坏的网格布局。

但我希望背景的左边缘与普通容器的装订线对齐，副本的右边缘与容器的右边缘对齐。

https://imgur.com/epT2mMu

下面的代码是我尝试过的。我是不是想太多了，还是无法使用引导程序？

<div style="background: linear-gradient(90deg, #ffffff 41%, rgba(209,224,215,.4) 41%);padding: 100px 0;margin-bottom: 100px;">
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-6" style="padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0">
                <img src="images/hero-03.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-3">
                <p>Lorem Ipsum</p>
            </div>
            <div class="col-lg-3"></div>
        </div>
    </div>
</div>

【问题讨论】：

我对你想要什么/问题是什么感到有点困惑。您是说这两列没有与您的页面边缘齐平吗？
我希望图像与页面边缘对齐到页面中间。背景与页面边缘对齐，并将左边缘与第二列的装订线对齐。副本从页面中间开始，并与容器末端第三列的边缘齐平。
究竟是什么不工作？快速 C/P：jsfiddle.net/tdyq5u8w/3 似乎符合您的要求。除非页面上的其他内容正在影响您的输出。
你已经用 Bootstrap-4 标记了这个问题...所以你需要按照 Bootstrap 来关注 container 和 container-fluid，对吧？

标签： bootstrap-4

【解决方案1】：

将您的代码替换为以下代码：

<div class="container-fluid">
<div class="row justify-content-center align-items-center mt-5">
    <div class="col-lg-4 col-4" style="position: absolute;z-index: 1000; left: 0px">
        <img src="https://images.pexels.com/photos/1250260/pexels-photo-1250260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Cinque Terre" class="img-thumbnail" >
    </div>
    <div class="offset-3 col-lg-8 col-8 p-5" style="background-color: lightgrey; height: 380px;">
        <p class="pt-5 pb-5 ml-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

【讨论】：