Как наклеить несколько кнопок на несколько панелей с различным содержанием

Question

У меня есть сайт (http://defensemonkees.nl/), и у нас есть 3 панели на индексной странице. Я сделал гибкую коробку с тремя предметами в ней, а затем я использовал растяжку, чтобы сделать все панели одинаковой высоты. Но я хочу, чтобы кнопки пали на дно. Я пробовал использовать липкий метод нижнего колонтитула, но он работает только по одной кнопке за раз. В этом случае было бы проще просто нанести верхнюю часть на две левые кнопки. Но я думаю, что для решения проблемы должно быть более чистое решение, а не просто «жесткий код». Я не размещал все CSS-файлы, большинство из которых обрабатывается Bootstrap.

<div id="flexBox3Monkees"> 

     <div class="panel panel-default item"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Voor wie?</h3> 
       </div> 
       <!-- end panel-heading --> 
       <img src="Content/Images/WebMonkee.png" alt="DefenseMonkees Logo" class="img-circle monkeyPic" /> 
       <p class="indexP"> 
        Krav Maga is geschikt voor iedereen! Geen enkele ervaring met zelfverdediging? 
       Jong, oud, man, vrouw, sportief en 'niet' sportief, bij DefenseMonkees begeleiden wij 
       u stap voor stap zodat u een conflict ontloopt of be&euml;indigd op de meest effici&euml;nte manier. 
       We simuleren realistische situaties en zorgen er samen voor dat u een uitstekende 
       conditie krijgt! 
       </p> 
       <div class="indexbutton"> 
        <a href="../Fotos.aspx" class="btn btn-warning btn-block">Impressie</a> 
       </div> 
      </div> 
      <div class="panel panel-default item"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">DefenseMonkees</h3> 
       </div> 
       <!-- end panel-heading --> 
       <img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" /> 
       <p class="indexP"> 
        De instructeurs van DefenseMonkees zijn er trots op dat vrijwel al onze studenten 
       in een vrij korte periode van inspanning een gezonder en fitter lichaam hebben gekregen, 
       zich veiliger zijn gaan voelen en zelfverzekerder over straat durven. Dit motiveert 
       DefenseMonkees om continu de beste resultaten te blijven na streven. 
       </p> 
       <div class="indexbutton buttonPositionCustom2I"> 
        <a href="Succes.aspx" class="btn btn-info btn-block indexbutton">Succes verhalen</a> 
       </div> 
      </div> 
     <!-- end panel --> 

      <div id="indexPanel" class="panel panel-default item"> 
       <div class="panel-heading"> 
        <h3 class="panel-title"><%= GetNextTraningDate() %> </h3> 
       </div> 
       <!-- end panel-heading --> 
       <img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" /> 
       <p class="indexP">Voor maar &#8364;36 per maand kunt u bij DefensMonkees 8 keer per maand trainen in Maastricht, Heerlen, Sittard of Utrecht.</p> 

       <p class="indexP"> 
        Wees gerust, beginnen is heel eenvoudig! Onze professionele instructeurs begeleiden u 
       stap voor stap dus wacht niet langer en neem vanavond nog een gratis proefles. 
       </p> 
       <div class="indexbutton buttonPositionCustom3I"> 
        <a href="Proefles.aspx" id="buttonRed" class="btn btn-danger btn-block indexbutton"> 
         <span class="glyphicon glyphicon-hand-up"></span>&nbsp;&nbsp;Boek gratis proefles</a> 
       </div> 
      </div> 
     </div> 

CSS

#flexBox3Monkees { 
    display: flex; 
    justify-content: space-around; 
    align-items: stretch; 
    text-align: center; 
} 

.item { 
    /*border: black 2px solid;*/ 
    width: 30%; 
} 

@media(max-width:767px) { 
    #flexBox3Monkees { 
     flex-direction: column; 
     margin-top: 40px; 
    } 

    .item { 
     width: 100%; 

    } 
} 

Answer 1

Попробуйте это? DEMO

.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.panel-heading { 
 
    flex: 0 0 100%; 
 
} 
 

 
img { 
 
    flex: 0 0 100%; 
 
} 
 

 
p { 
 
    flex: 1; 
 
} 
 

 
.indexbutton { 
 
    flex: 0 0 100%; 
 
}