我如何對齊所有這些讀摩爾斯在引導同一行

Question

我正在做一個菜單，但我的「更多」 S不是在同一行

https://i.gyazo.com/3a9dd4d8e497b3772110edd4ac35fa76.png

這裏對齊的HTML代碼它

<div class="home-menu parallax" data-stellar-background-ratio="0.5"> 
    <div class="container no-padding"> 
     <div class="hm-info"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h3><span>Today Deals</span>Breakfast</h3> 
        <h4>Pancakes with Seasonal Fruit</h4> 
        <div class="menu-wrapper"> 
         <p>Maple Syrup & Icecream</p> 
         <span class="price">$13.95</span> 
         <div class="dotted-bg"></div> 
        </div> 
        <h4>Pancakes with Maple Syrup</h4> 
        <div class="menu-wrapper"> 
         <p>And Bacon</p> 
         <span class="price">$15.95</span> 
         <div class="dotted-bg"></div> 
        </div> 
        <h4>Smoked Salmon Omelette</h4> 
        <div class="menu-wrapper"> 
         <p>with Onion, Capers and Toast</p> 
         <span class="price">$16.95</span> 
         <div class="dotted-bg"></div> 
        </div> 
        <h4>French Toast</h4> 
        <div class="menu-wrapper"> 
         <p>with Maple Syrup</p> 
         <span class="price">$15.95</span> 
         <div class="dotted-bg"></div> 
        </div> 
        <div class="menureadmore"> 
        <a href="#">Read More</a> 
       </div> 
       </div> 
       <div class="col-md-4"> 
        <h3><span>Today Deals</span>Coffee</h3> 

        <div class="menu-wrapper"> 
         <span class="price">$12.00</span> 
         <h4>Cappucino</h4> 
        </div> 

        <div class="menu-wrapper"> 
         <span class="price">$3.95</span> 
         <h4>Flat White</h4> 
        </div> 

        <div class="menu-wrapper"> 
         <span class="price">$4.20</span> 
         <h4>Latte</h4> 
        </div> 

        <div class="menu-wrapper"> 
         <span class="price">$4.80</span> 
         <h4>Chai Latte</h4> 
        </div> 

        <div class="menu-wrapper"> 
         <span class="price">$4.40</span> 
         <h4>Hot Chocolate</h4> 
        </div> 

        <div class="menu-wrapper"> 
         <span class="price">$4.55</span> 
         <h4>Hot Mocha</h4> 
        </div> 
        <div class="menureadmore" > 
        <a href="#">Read More</a> 
       </div> 
       </div> 


       <div class="col-md-4"> 
        <h3><span>Today Deals</span>Lunch</h3> 

        <h4>Beef Lasagne</h4> 
        <div class="menu-wrapper"> 
         <p>With Salad</p> 
         <span class="price">$16.95</span> 
         <div class="dotted-bg"></div> 
        </div> 

        <h4>Fabulous Thai Chicken Patties</h4> 
        <div class="menu-wrapper"> 
         <p>with Salad (Gluten Free)</p> 
         <span class="price">$15.95</span> 
         <div class="dotted-bg"></div> 
        </div> 

        <h4>Sensational Fillet Steak</h4> 
        <div class="menu-wrapper"> 
         <p>Salad & Chips.</p> 
         <span class="price">$21.95</span> 
         <div class="dotted-bg"></div> 
        </div> 

        <h4>Roasted Vegetable Rosti Stack</h4> 
        <div class="menu-wrapper"> 
         <p>(Gluten Free) with Salad</p> 
         <span class="price">$16.95</span> 
         <div class="dotted-bg"></div> 
        </div> 
        <div class="menureadmore"> 
        <a href="#">Read More</a> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

和CSS

.menu-wrapper .price 
    { 
    float: right; 
    padding-left: 10px; 
    line-height: 19.8px; 
    margin: 5px 0px; 
    background: #f7f3e8; 
    font-weight: 700; 
    font-size: 15px; 
    color: #d80702; 
    font-family: Lato; 
    position: relative; 
    z-index: 11; 
    } 
.menureadmore{ 
    text-align:center; 
     font-weight:700; 
    font-size: 16px; 
    } 

我如何對準那些 「更多」 S因此T嘿都垂直對齊？

感謝

Answer 1

引導網格系統是行佈局，因此該行認爲含有更多，該行應該（也可以使用藥水絕對試試）被封閉在一個類行的div，然後你可以給他們上校，他們將完全對齊

Answer 2

給人以位置固定底部0或任何你想