Question

我有多个Bootstrap面板，但它们都具有基于其内容的个人高度。

看一下图片，所有面板都有不等的高度。我希望他们有一个普遍的高度，并且也要有回应。

我尝试过使用：

min-height;
max-height;
heigth: x !important;

但它们似乎都不起作用。

这是我的代码：

.panel{
    text-align: center;
    min-height: 150px !important;
    max-height: 300px;
}

HTML（请注意，我在一行中添加了3个面板。

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 p1" data-clickstate="0">
            <div class="panel panel-default" id="panel_1">
                <div class="panel-body" style="display: inline" id="cat_1">

                    <div class="icono">
                        <img src="media/iconos/motores_busqueda.png" alt="">
                    </div>
                    <div class="nombre-y-des">
                        <div>
                            <h5 class="nombre">Motores de búsqueda</h5>
                        </div>
                        <div class="des">
                            <p>Servicios de búqueda de páginas web.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default" id="panel_2">
                <div class="panel-body" id="cat_2" style="display: inline">
                    <div class="icono">
                        <img src="media/iconos/navegadores.png" alt="">
                    </div>
                    <div class="nombre-y-des">
                        <div>
                            <h5 class="nombre">Navegadores</h5>
                        </div>
                        <div class="des">
                            <p>Programa que permite navegar por internet, renderizado páginas HTML en contenido visual y
                                comprensible.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default" id="panel_3">
                <div class="panel-body" id="cat_3" style="display: inline">
                    <div class="icono">
                        <img src="media/iconos/servidores_correo.png" alt="">
                    </div>
                    <div class="nombre-y-des">
                        <div>
                            <h5 class="nombre">Servidores de correo</h5>
                        </div>
                        <div class="des">
                            <p>Servicio que permite enviar y recibir mensajes mediante sistemas de comunicación eletrónicos
                                en línea.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这是一个可以帮助你的小提琴：https://jsfiddle.net/DTcHh/23594/

在height上添加.panel-body相关属性后，您可以将面板的高度更改为固定高度，同时，您已删除了css代码：display: inline; < / p>

在JSFiddle中，我创建了另一个高度修复类，如下所示：

.fixed-panel {
    min-height: 300px;
    max-height: 500px;
    overflow-y: scroll;
}

希望这能帮到你！

Answer 2

好的，伙计们，我找到了一个简单的方法。

阅读@IronWilliamCash评论，我用过：

height: xpx;

内部 .panel （它没有在 .panel-body 中工作）。

瞧！所有相同的高度，并保持响应只是使用 @media 查询。

@media (min-width: 768px) { 
    .caracs{
    width: 500px !important;
    font-family: 'Poppins', sans-serif;
    } 
.panel{
    text-align: center;
    height: 255px;
    }
}
@media (min-width: 992px) { 
    .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
    } 
}
@media (min-width: 1200px) { 
    .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
    }
    .panel{
        text-align: center;
        height: 165px;
    }
}

保持Bootstrap面板与其中的内容无关

2 个答案: