Comment faire pour que les boutons à l'intérieur des colonnes soient égaux en hauteur sur tous les appareils?

Mes colonnes Bootstrap sont de hauteur égale, peu importe la taille de l'appareil (ordinateurs, tablettes, téléphones, etc.) grâce à MatchHeight de JavaScript.Comment faire pour que les boutons à l'intérieur des colonnes soient égaux en hauteur sur tous les appareils?

Mais le problème est que je veux aussi faire les boutons à l'intérieur égaux en hauteur malgré la quantité différente de texte au-dessus d'eux. J'ai essayé min-height, margin-bottom (ne répond pas). Comment puis-je atteindre cet objectif? Avec bootstrap en quelque sorte, ou js, ou quelque chose mais c'est important pour l'esthétique!

EDIT: C'est ce que je veux réaliser: https://i.stack.imgur.com/NOlns.png Les boutons restent les mêmes quoi qu'il arrive!

#section4 .divider-fullwidth { 
 
    margin-bottom: 15px; 
 
} 
 

 
#section4 .lastdivider { 
 
    margin-top: 50px; 
 
} 
 

 
#section4 .box { 
 
    margin: 1px; 
 
    margin-bottom: 30px; 
 
    padding: 5% 8%; 
 
} 
 

 
#section4 .btn { 
 
    font-size: .9em; 
 
    padding: 5% 4%; 
 
    width: 100%; 
 
} 
 

 
#section4 .innerBox { 
 
    min-height: 210px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="background_section4"> 
 
    <div id="section4" class="container"> 
 
    <div class="row intro"> 
 
     <h2>ESCOGE TU PLAN</h2> 
 
     <p>El precio influye en el tipo y número de actividades que organizaremos, pero te aseguramos que todas son extraordinarias.</p> 
 
    </div> 
 
    <div class="row columns"> 
 
     <div class="col-sm-4"> 
 
     <div class="box"> 
 
      <h4> 
 
      <span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span> 
 
      </h4> 
 
      <p> 
 
      <span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto/14€ niñ@ 
 
      </p> 
 
      <div> 
 
      <p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p> 
 
      </div> 
 
      <div class="divider-fullwidth"> 
 
      </div> 
 
      <div class="innerBox"> 
 
      <p> 
 
       <strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong> 
 
      </p> 
 
      <ul> 
 
       <li> 
 
       <span>Salida en catamarán + Snorkel en mar abierto</span> 
 
       </li> 
 
       <li> 
 
       <span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span> 
 
       </li> 
 
       <li> 
 
       <span>Circuito SPA privado + Copa de cava + Menú degustación</span> 
 
       </li> 
 
       <li> 
 
       <span>Menú degustación fusión cocina japonesa y mexicana</span> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div class="divider-fullwidth lastdivider"> 
 
      </div> 
 
      <a type="button" class="btn btn-lg" href="">QUIERO MI</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <div class="box"> 
 
      <h4> 
 
      <span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span> 
 
      </h4> 
 
      <p> 
 
      <span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto/29€ niñ@ 
 
      </p> 
 
      <div> 
 
      <p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p> 
 
      </div> 
 
      <div class="divider-fullwidth"> 
 
      </div> 
 
      <div class="innerBox"> 
 
      <p> 
 
       <strong>Algunos planes sorpresa que han hecho otros:</strong> 
 
      </p> 
 
      <ul> 
 
       <li> 
 
       <span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span> 
 
       </li> 
 
       <li> 
 
       <span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span> 
 
       </li> 
 
       <li> 
 
       <span>Barranquismo guiado + Menú degustación</span> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div class="divider-fullwidth lastdivider"> 
 
      </div> 
 
      <a type="button" class="btn btn-lg" href="">QUIERO MI</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <div class="box lastBox"> 
 
      <h4> 
 
      <span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span> 
 
      </h4> 
 
      <p> 
 
      <span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto/49€ niñ@ 
 
      </p> 
 
      <div> 
 
      <p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p> 
 
      </div> 
 
      <div class="divider-fullwidth"> 
 
      </div> 
 
      <div class="innerBox lastInnerBox"> 
 
      <p> 
 
       <strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong> 
 
      </p> 
 
      <ul> 
 
       <li> 
 
       <span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span> 
 
       </li> 
 
       <li> 
 
       <span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span> 
 
       </li> 
 
       <li> 
 
       <span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div class="divider-fullwidth lastdivider"> 
 
      </div> 
 
      <a type="button" class="btn btn-lg" href="">QUIERO MI</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-09-26 Anonymous

pouvez-vous fournir une image de ce que vous voulez faire? Et aussi s'il vous plaît fournir comment il regarde en ce moment. Est-ce la même chose que l'extrait que j'ai ajouté? –

Terminé! Pardon! J'espère que cette image que j'ai incluse dans mon op vous aide à comprendre à quoi je veux ressembler! aussi l'extrait n'est pas vraiment à quoi ça ressemble maintenant. J'ai 3 colonnes, en ligne, et elles ont la même hauteur en effet. Le problème vient des boutons qui ne sont pas alignés comme dans l'image ci-dessus. –

est inférieure à la solution, je suppose, c'est ce que vous recherchez.

.box{ 
    position: relative; 
    height:500px; 
} 
.btn{ 
    position: absolute; 
    bottom:0px; 
    width: auto; //You can adjust the width accordingly 
}

Vous pouvez ajuster la hauteur de votre div en conséquence.

.box { 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
    margin: 20px; 
 
    position: relative; 
 
    height: 440px; 
 
} 
 

 
.btn { 
 
    font-size: .9em; 
 
    float: none; 
 
    width: auto; 
 
    position: absolute; 
 
    bottom: 10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row columns"> 
 
    <div class="col-sm-4"> 
 
    <div class="box"> 
 
     <h4> 
 
     <span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span> 
 
     </h4> 
 
     <p> 
 
     <span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto/14€ niñ@ 
 
     </p> 
 
     <div> 
 
     <p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p> 
 
     </div> 
 
     <div class="divider-fullwidth"> 
 
     </div> 
 
     <div class="innerBox"> 
 
     <p> 
 
      <strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong> 
 
     </p> 
 
     <ul> 
 
      <li> 
 
      <span>Salida en catamarán + Snorkel en mar abierto</span> 
 
      </li> 
 
      <li> 
 
      <span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span> 
 
      </li> 
 
      <li> 
 
      <span>Circuito SPA privado + Copa de cava + Menú degustación</span> 
 
      </li> 
 
      <li> 
 
      <span>Menú degustación fusión cocina japonesa y mexicana</span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="divider-fullwidth lastdivider"> 
 
     </div> 
 
     <a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <div class="box"> 
 
     <h4> 
 
     <span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span> 
 
     </h4> 
 
     <p> 
 
     <span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto/29€ niñ@ 
 
     </p> 
 
     <div> 
 
     <p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p> 
 
     </div> 
 
     <div class="divider-fullwidth"> 
 
     </div> 
 
     <div class="innerBox"> 
 
     <p> 
 
      <strong>Algunos planes sorpresa que han hecho otros:</strong> 
 
     </p> 
 
     <ul> 
 
      <li> 
 
      <span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span> 
 
      </li> 
 
      <li> 
 
      <span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span> 
 
      </li> 
 
      <li> 
 
      <span>Barranquismo guiado + Menú degustación</span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="divider-fullwidth lastdivider"> 
 
     </div> 
 
     <a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <div class="box lastBox"> 
 
     <h4> 
 
     <span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span> 
 
     </h4> 
 
     <p> 
 
     <span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto/49€ niñ@ 
 
     </p> 
 
     <div> 
 
     <p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p> 
 
     </div> 
 
     <div class="divider-fullwidth"> 
 
     </div> 
 
     <div class="innerBox lastInnerBox"> 
 
     <p> 
 
      <strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong> 
 
     </p> 
 
     <ul> 
 
      <li> 
 
      <span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span> 
 
      </li> 
 
      <li> 
 
      <span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span> 
 
      </li> 
 
      <li> 
 
      <span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="divider-fullwidth lastdivider"> 
 
     </div> 
 
     <a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a> 
 
    </div> 
 
    </div> 
 
</div>

Rembourrage donné à .box est l'origine du problème.

Source

2017-09-26 21:17:11

Merci! Cependant cela ne fonctionne que pour les ordinateurs, dès que je le rends plus petit, les boutons cessent d'avoir la même hauteur. :/ –

Vous avez quel est le problème. Vous devrez fournir la hauteur pour la classe 'box'. –

S'il vous plaît vérifier la modification. @Evan –

Comment faire pour que les boutons à l'intérieur des colonnes soient égaux en hauteur sur tous les appareils?

Répondre

Questions connexes