html - Bootstrap 将容器放入容器流体中

Question

我想制作两个不同的列背景，为此我设置了 container-fluid，制作了两列，然后制作了另一行......但它不想工作。

I need like this (PHOTO)

这是我的代码

    <section id="mid">
    <div class="container-fluid mid">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 left">
                        <div class="container">
                            <h2>Inovative macaroons</h2>
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <span class="fa-stack fa-2x media-object">
                                            <i class="fa fa-circle fa-stack-2x bg"></i>
                                            <i class="fa fa-tag fa-stack-1x fa-inverse"></i>
                                        </span>
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h3 class="media-heading">Best Prices</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada et.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 right">
                        <h2> Specials</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

在“左边”的 css 中，我制作了白色 BG，在右边，我制作了粉红色。

Answer 1

使用 flex css 来实现这一点。如果我对你的理解是正确的，你希望两列的高度与由于文本而具有最大高度的一列相同。

在你的代码中添加以下css

.flex-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-row > [class*='col-'] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

然后将 flex-row 应用到包含左列和右列的行

<div class="row flex-row">
                <div class="col-md-6 left">
                    <div class="container">

希望这对您有所帮助。