Question

我正在努力将网站从Bootstrap 4 Alpha 6迁移到Bootstrap 4 Beta 1.在我的卡片中，我使用带有一些右对齐文本的图标。使用Alpha，我的卡看起来像这样：

+--------------------------------------+
| [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]表示我的图标的位置。为了创建这个，我使用以下带有Alpha代码的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>

自从转向Bootstrap 4 beta后，标题全部被搞砸了。＆＃34;一些文字＆＃34;左对齐并位于图标下方的行上。我不明白为什么会这样。出于这个原因，我不确定如何解决它。我阅读了所有的发行说明，但我仍然不确定我错过了什么。

Answer 1

有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卡标头没有按预期显示？

1 个答案: