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

希望這可以幫助你！