Question

我想制作两个不同的列背景，为此我设置容器流体，并制作两列，并创建另一行..但它不想工作。

这是我的代码

    <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应用于包含左和右colomns的行

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

希望这有帮助。

Bootstrap将容器放入容器液中

1 个答案: