Bootstrap 4卡片图像叠加浮动问题

Question

我正在使用Bootstrap 4并试图使用基于卡片的布局来显示我的商店。 我有一个位置标记，应该来商店，并在同一行，向右浮动，我想要一个5星评级。 （图标来自字体真棒） 但是，每当我使用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来提高.stores卡-IMG-叠加文本在图像和浮动.rating跨度：

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

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

提前感谢！

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