ブートストラップ4のカードヘッダーが期待どおりに表示されないのはなぜですか？

Question

サイトをBootstrap 4 Alpha 6からBootstrap 4 Beta 1に移行しようとしています。私のカードでは、右揃えのテキストのアイコンを使用しています。

+--------------------------------------+ 
| [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.        | 
+--------------------------------------+ 

[x]が私のアイコンの位置を表しています。このように、必要に応じてアルファを持つ、私のカードが見えました。これを作成するために、私はアルファコードで、次のHTMLを使用していました：

<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> 

4ベータ版をブートストラップするために移動するので、ヘッダはすべてが台無しです。 "some text"は左揃えで、アイコンの下の行にあります。なぜこれが起こっているのか分かりません。そのため、私はそれを修正する方法がわかりません。私はすべてのリリースノートを読みましたが、私はまだ何が欠けているのか分かりません。

Answer 1

several changes from Bootstrap alpha to betaがあります。 alpha-6では、-xs-の小文字が削除されているため、float-xs-rightの代わりにfloat-rightを使用するだけです。またcard-blockはcard-bodyに置き換えられました。

<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