如何解决文字未显示在右侧的问题？

Question

我正在尝试将文本放置在卡片标题的右侧，小提琴上的这个工作示例奇怪地在我的项目中不起作用，我使用的是bootstrap 4

https://jsfiddle.net/LL0qnnxm/61/

这就是我在我的应用程序上得到的东西

相应的代码：

<div class="col">
     <div class="card">
       <!--CARD HEADER-->
       <h4 class="card-header">HEADER <small class="float-sm-right">right aligned</small></h4>
       <!--CARD BODY-->
       <div class="card-body">
       </div>
     </div>
   </div>
 </div>

感谢您的时间。

Answer 1

您的样式很可能会使card-header的宽度仅与其内容一样大，例如display: inline。

尝试将display: block;添加到card-header或再次检查是否没有其他样式可以覆盖display: block。

.card-header {
   display: block;
}

Answer 2

当您拥有float-sm-right时，仅当屏幕为sm尺寸（768像素及以上）时，它才会向右浮动。只需删除-sm。

https://jsfiddle.net/g9nu8f7d/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
        <!--CARD BODY-->
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>

</div>