Question

我有一行和三列高度相等，如下所示：

<div class="row row-eq-height">
        <div class="col-xs-12 col-sm-4 panel">
            <div class="well">
                <strong class="text-info">well 1</strong>
            </div>
        </div>

        <div class="col-xs-6 col-sm-4 panel">
            <div class="well">
                <strong class="text-info">well 2</strong>
                <hr>
            </div>
        </div>

        <div class="col-xs-6 col-sm-4 panel">
            <div class="well">
                <strong class="text-info">well 3</strong>
                <hr>
            </div>
        </div>
    </div>

我想要实现的是拥有相同尺寸的三口井（最大尺寸的井）。我尝试将.well添加到列类中，但此解决方案会泄漏井之间的空格。

Answer 1

尝试使用class text-justify

<div class="row row-eq-height">
    <div class="col-xs-12 col-sm-4 panel">
        <div class="well text-justify">
            <strong class="text-info">well 1</strong>
        </div>
    </div>

    <div class="col-xs-6 col-sm-4 panel">
        <div class="well  text-justify">
            <strong class="text-info">well 2</strong>
            <hr>
        </div>
    </div>

    <div class="col-xs-6 col-sm-4 panel">
        <div class="well  text-justify">
            <strong class="text-info">well 3</strong>
            <hr>
        </div>
    </div>
</div>

Bootstrap井填充行

1 个答案: