html - 如何修复文本未显示在右侧？

Question

我正在尝试将文本定位到卡片标题的右侧，奇怪的是，这个关于 fiddle 的工作示例在我的元素中不起作用，我正在使用 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;
}