如何將多個按鈕粘貼到不同內容的多個面板

Question

我有一個網站（http://defensemonkees.nl/），我們在索引頁上有3個面板。我製作了一個帶有3個項目的彈性盒，然後用伸展的方式將所有的面板放在同一高度。但我想讓按鈕堅持到底部。我嘗試了一個粘性頁腳方法，但它一次只能用於一個按鈕。在這種情況下，只需在左側2個按鈕上留下一個邊距即可。但我認爲一般應該有一個更清潔的解決方案來解決這個問題，而不僅僅是「硬代碼」。我沒有發佈所有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%; 
 
}