保持Bootstrap面板独立于内部的内容相同的大小

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

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

阅读@IronWilliamCash评论，我用：

height: xpx; 

内.panel（它没有.panel体工作）。

瞧！所有相同的高度，并保持它们的响应只需使用@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; 
    } 
} 

Answer 2

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

当在.panel-body上添加height相关属性时，您可以将面板的高度更改为固定高度，同样，您也可以删除CSS代码：display: inline;

在的jsfiddle，我创造了另一个类的高度固定如下：

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

希望这可以帮助你！