Warum werden meine Bootstrap 4-Kartenköpfe nicht wie erwartet angezeigt?

Question

Ich arbeite daran, eine Site von Bootstrap 4 Alpha 6 zu Bootstrap 4 Beta 1 zu migrieren. Auf meinen Karten verwende ich ein Icon mit rechtsbündigem Text. Mit dem Alpha, sah meine Karten als wie dies gewünscht:

+--------------------------------------+ 
| [x]      some text | 
+--------------------------------------+ 
| This is the content of my card. It's | 
| just a block of text and it wraps | 
| several lines. Nothing special  | 
| really.        | 
+--------------------------------------+ 

Die [x] stellt die Position meines Symbol. Um dies zu schaffen, war ich mit dem folgenden HTML-Code mit dem Code Alpha:

<div class="card"> 
    <div class="card-header"> 
    <span class="fa fa-circle"></span> 
    <div class="float-xs-right">some text</div> 
    </div> 

    <div class="card-block"> 
    <div class="text-muted">article</div> 
     <h5 class="card-title">Hello</h5> 
     <p class="card-text"> 
     This is the content of my card. 
     It's just a block of text and it wraps several lines. 
     Nothing special really. 
     </p> 
    </div> 
    </div> 
</div> 

Seit dem Umzug 4 Beta Bootstrap, der Kopf ist alles vermasselt. Der "einige Text" ist linksbündig und in der Zeile unter dem Symbol. Ich verstehe nicht, warum das passiert. Aus diesem Grund weiß ich nicht, wie ich es beheben soll. Ich lese alle Versionshinweise und bin mir immer noch nicht sicher, was ich vermisse.

Answer 1

Es gab several changes from Bootstrap alpha to beta. Ab Alpha-6 wurde das Infix -xs- entfernt, also verwenden Sie einfach float-right statt float-xs-right. Auch card-block wurde durch card-body ersetzt.

<div class="card"> 
     <div class="card-header"> 
      <span class="fa fa-circle"></span> 
      <div class="float-right">some text</div> 
     </div> 
     <div class="card-body"> 
      <div class="text-muted">article</div> 
      <h5 class="card-title">Hello</h5> 
      <p class="card-text"> 
       This is the content of my card. It's just a block of text and it wraps several lines. Nothing special really. 
      </p> 
     </div> 
    </div> 

https://www.codeply.com/go/YJrvySZD3O