为什么我的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-β，所述报头是所有一团糟。 “一些文本”是左对齐的，位于图标下方的一行。我不明白为什么会发生这种情况。出于这个原因，我不知道如何解决它。我阅读了所有的发行说明，但我仍然不确定我错过了什么。

答

已经有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

为什么我的Bootstrap 4卡头不按预期显示？

相关推荐