爲什麼我的Bootstrap 4卡頭不按預期顯示？

我正在將一個站點從Bootstrap 4 Alpha 6遷移到Bootstrap 4 Beta 1.在我的卡片中，我正在使用帶有一些右對齊文本的圖標。爲什麼我的Bootstrap 4卡頭不按預期顯示？

+--------------------------------------+ 
| [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-β，所述報頭是所有一團糟。「一些文本」是左對齊的，位於圖標下方的一行。我不明白爲什麼會發生這種情況。出於這個原因，我不知道如何解決它。我閱讀了所有的發行說明，但我仍然不確定我錯過了什麼。

來源

2017-08-14 user70192

已經有several changes from Bootstrap alpha to beta。從alpha-6開始，-xs-中綴已被刪除，因此您只需使用float-right而不是float-xs-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

來源

2017-08-14 13:41:52 ZimSystem

爲什麼我的Bootstrap 4卡頭不按預期顯示？

回答

相關問題