Bootstrap 4 行混合容器和容器流体柱答案

【问题标题】：Bootstrap 4 Row with Mixed Container and Container-Fluid ColumnBootstrap 4 行混合容器和容器流体柱
【发布时间】：2021-06-24 18:38:39
【问题描述】：

我正在尝试创建一个看起来像图像上的组件的布局。

这是一个 12 列的引导网格。我希望让文本占据 6 列，文本和最后一个列之间的 1 个列间隔，然后我希望最后一个列（图像）占据其余的水平空间，在和从容器中取出。

我正在尝试混合容器和容器流体类（根据 Bootstrap 文档不建议这样做），但它不起作用。

如何使用 Bootstrap 4 实现这种类型的布局？图片：

现有代码：

<div class="info-side">
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <h2>@Model.TitleText</h2>
                <p>@Model.AreaText</p>
            </div>  
            <div class="col-1">
            </div>
            <div class="col-5">
                <img src="@Model.Image.Url)" alt="@Model.Image.AlternativeText" style="width: 100%; height:100%;">
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

试试这个

<div class="info-side" >
    <div class="container">
        <div class="row col">
            <div class="col-6 bg-info">
                <h2>@Model.TitleText</h2>
                <p>@Model.AreaText</p>
            </div>
            <div class="col-1 bg-warning">
            </div>
            <div class="col-5 bg-info">
                <img src="@Model.Image.Url)" alt="@Model.Image.AlternativeText" style="width: 100%; height:100%;">
            </div>
        </div>
    </div>
</div>

我将 col 添加到类行 @div 标记。它扩展到所有可用空间。

另一方面，混合容器规则和流体是可能的，但您必须注意层次结构：流体与规则一样宽，因此规则必须单独包含或包含在流体类中。看到这个答案：link

祝你好运！

【讨论】：

【解决方案2】：

我找到了以下解决方案，它在问题中的原始图像中创建布局。

我必须将一行位置设为绝对位置，这样两个容器就会相互重叠。

<div class="info-side">

    <div class="text-side container" style="position: relative;" >
        <div class="text-area" style="position: absolute;">
            <div class="row">
                <div class="col-6 d-flex align-items-center" style="height: 600px;">
                    <div class="text-items">
                        <h2>@Model.TitleText</h2>
                        <p>@Html.Raw(Model.AreaText)</p>
                    </div>
                </div> 
            </div>
        </div>
    </div>

    <div class="image-side container-fluid">
        <div class="row">
            <div class="col-7"
            <div class="col-5" style="height: 600px; ">
                <img src="@Model.Image.Url" alt="@Model.Image.AlternativeText">
            </div>
        </div>
    </div>

</div>

【讨论】：