Question

我有几个bootstrap col-，我希望它们具有相同的高度。我找到了这个解决方案https://stackoverflow.com/a/22892773/5798225

如果所有panel都有height: 100%，则此方法无效。

现在我需要一个小于height: 100%的面板。问题是其他面板没有调整大小。

以下是一个示例：https://jsfiddle.net/DTcHh/38657/

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.equal {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.panel {
    height: 100%;
}
.panel-small {
    height: 50%;
    overflow: hidden;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row equal">
        <!--begin panel 1 -->
        <div class="col-xs-4">
            <div class="panel panel-primary panel-small">
                <div class="panel-heading">
                    <h1 class="panel-title">Web y Metrícas</h1>
                </div>
                <!-- end panel-heading -->
                <div class="panel-body">
                    <p>
                        <img src="//placehold.it/120" class="img-responsive center-block">
                    </p>
                    <p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
                    <ul class="text-left">

                        <li>Data Mining</li>
                    </ul> <a class="btn btn-primary" href="#">Ver más »</a>
                </div>
                <!-- end panel-body -->
            </div>
            <!-- end panel-primary -->
        </div>
        <!--end col-xs-4 -->
        <!-- begin panel 2 -->
        <div class="col-xs-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1 class="panel-title">Gestíon de Redes Socials</h1>
                </div>
                <!-- end panel-heading -->
                <div class="panel-body">
                    <p>
                        <img src="//placehold.it/120x150" class="img-responsive center-block">
                    </p>
                    <a class="btn btn-primary" href="#">Ver más »</a>
                </div>
                <!-- end panel-body -->
            </div>
            <!-- end panel-primary -->
        </div>
        <!-- end col-xs-4 -->
        <!--begin panel 3 -->
        <div class="col-xs-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1 class="panel-title">Plan de Medios</h1>
                </div>
                <!-- end panel-heading -->
                <div class="panel-body">
                    <p>
                        <img src="//placehold.it/120" class="img-responsive center-block">
                    </p>
                    <p class="text-left lead2">Trabajamos en conjunto con la empresa.</p>
                    <a class="btn btn-primary" href="#">Ver más »</a>
                </div>
                <!-- end panel-body -->
            </div>
            <!-- end  panel-primary -->
        </div>
        <!-- end col-xs-4 -->
    </div>
    <!-- end row -->
</div>

＆＃13;

第一个面板有height: 50%，其他面板有height: 100%。现在我希望第二和第三个面板更小。应该尽可能小，因为它们的内容允许但仍然共享一个共同的高度。第一个面板可以小于第二个面板和第三个面板。

我怎样才能做到这一点？

Bootstrap 3列高度相同

0 个答案: