Question

我正在尝试将容器流体的内容与Bootstrap中的另一个容器对齐。此图像显示了我希望如何对齐，图像左侧对齐，绿色背景右侧对齐，以解决网格布局破裂的问题。

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

下面的代码是我尝试过的。我是否在考虑这个问题，或者使用引导程序无法做到？

<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>

Answer 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>

如何将流体容器的内容与引导网格对齐？

1 个答案: