ブートストラップ4カードイメージオーバーレイフロートの問題

Question

私はブートストラップ4を使用しており、カードベースのレイアウトを使用して店舗を表示しようとしています。 私は、店舗に来るはずの位置マーカーを持っていて、同じ行に、右に浮いています。私は5つ星の評価をします。 （font-awesomeのアイコン） しかし、浮動小数点数を使うときはいつも、それらは消えてしまいます。 （私は画像の下にあると仮定）

誰かがこれを修正する方法についての手掛かりを持っていますか？事前に

.stores-list .stores-card-img-overlay-text { 
    color: #fff; 
    margin-top: -50px; 
} 

.stores-list .stores-card-img-overlay-text .rating { 
    float: right; 
} 

ありがとう：画像の上に.storesカード-IMG-オーバーレイテキストを高め、.ratingスパンをfloatへ

<div class="card"> 
    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap"> 
    <div class="card-block"> 
     <div class="stores-card-img-overlay-text"> 
      <p> 
       <i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt 
       <span class="rating"> 
        <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i> 
        <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i> 
        <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i> 
        <i class="fa fa-star-o" aria-hidden="true"></i> 
        <i class="fa fa-star-o" aria-hidden="true"></i> 
       </span> 
      </p> 
     </div> 
     <div class="test-shizzle"> 
      <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </div> 
     <h4 class="card-title">De bakkerij testshop</h4> 
     <p class="card-text">Vlees/vis/Gevogelte/Charcuterie/Salades/Soep/Kaas</p> 
     <p class="card-search-text">14 appels in gamma!</p> 
    </div> 
</div> 

とCSS！

Answer 1

私は私がブートストラップが提供するだけ.card-IMG-オーバーレイクラスでし実現しませんでしたよ馬鹿。 > _>

Answer 2

ブートストラップpull-xs-rightクラスを使用することができます。..

<div class="card"> 
       <img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap"> 
       <div class="card-block"> 
        <div class="stores-card-img-overlay-text"> 
         <p> 
          <i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt 
          <span class="rating pull-xs-right"> 
           <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i> 
           <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i> 
           <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i> 
           <i class="fa fa-star-o" aria-hidden="true"></i> 
           <i class="fa fa-star-o" aria-hidden="true"></i> 
          </span> 
         </p> 
        </div> 
        <div class="test-shizzle"> 
         <i class="fa fa-chevron-right" aria-hidden="true"></i> 
        </div> 
        <h4 class="card-title">De bakkerij testshop</h4> 
        <p class="card-text">Vlees/vis/Gevogelte/Charcuterie/Salades/Soep/Kaas</p> 
        <p class="card-search-text">14 appels in gamma!</p> 
       </div> 
      </div> 

http://codeply.com/go/60n8Prld36