ブートストラップパネルの内容は、内容とは関係なく同じです。

Question

私は複数のブートストラップパネルを持っていますが、その中身はすべてです。

画像を見ると、すべてのパネルの高さが同じではありません。私は彼らに一般的な身長を持たせて、敏感に対応してほしい。

私が使用して試してみた：

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

しかし、それらのどれも動いていないようにみえます。ここで

が私のコードです：

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

HTMLが（私は1つの列内の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/

height関連のプロパティが.panel-bodyに追加されている場合は、パネルの高さを固定された高さに変更することができます。 CSSコード：JSFiddleでdisplay: inline;

、私は次のように固定の高さのために別のクラスを作成しました：

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

が、これはあなたのお役に立てば幸い！