独立于面板内部内容，保持Bootstrap面板大小不变

Question

独立于面板内部内容，保持Bootstrap面板大小不变

3

我有多个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>

- dawn

2

除了你得到的答案之外，我认为你还应该使图标高度相同，这样文本就可以对齐。这只是我对设计的看法。 - Cave Johnson

@Andrew 是的，事实上我刚想到了这个。唉，美术团队做不出好东西！ - dawn

2

@dawn：我猜你的面板实际上是相同高度，但你看到的是面板主体。你应该将高度应用于这个类。没有一个可工作的例子，我无法确认，但你应该尝试一下。 - IronWilliamCash

@IronWIlliamCash确实有帮助，事实上解决了问题，尽管不是在*.panel-body上。它在.panel*上起作用。 - dawn

1

@dawn：很高兴我能帮忙。 - IronWilliamCash

2个回答

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;
    }
}

- dawn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steff Yang · Accepted Answer

这里有一个可能会帮到你的小工具：https://jsfiddle.net/DTcHh/23594/ 当在.panel-body上添加与height相关的属性时，可以将面板的高度更改为固定高度，同时需要删除CSS代码：display:inline; 在JSFiddle中，我创建了另一个用于修复高度的类，具体如下：

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

希望这能对你有所帮助！