将文本右对齐 in-line 与 Bootstrap 4

Question

我目前正在使用 bootstrap 4。我正在尝试在我的卡片上对齐文本 header，我尝试使用 ml-auto 但它没有用。可能的解决方案是什么？

这是我的卡 header 代码：

<div class="card-header bg-info text-white">
  <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
  <a href="#" class="text-white ml-auto">Add Media</a>
</div>

Answer 1

用这根线...

<div class="card-header bg-info text-white" style="text-align:right">
       <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
 </div>

Answer 2

我不使用 Bootstrap，我使用 Materialize，但您可以向其添加正常样式，
在你的

 <a href="#" class="text-white" style="text-align: right;"><i class="fa-th"></i> Media Library</a>

这只会将您的锚标记对齐到右侧

Answer 3

这取决于您使用的 Bootstrap 版本

Bootstrap 3

使用 class text-right

Bootstrap 4

在最新版本中，您当然可以使用 class text-lg-right 使用您喜欢的视口大小

补充

您在this question or check the official documentation v4

中查看更多

Answer 4

使用这个 class text-right..

<div class="card-header bg-info text-white text-right">
   <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
</div>

Answer 5

为了使 ml-auto class 正常工作，您只需将 d-flex class (display:flex) 添加到父元素中，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-header bg-info text-white d-flex">
    <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
    <a href="#" class="text-white ml-auto">Add Media</a>
</div>

将文本右对齐 in-line 与 Bootstrap 4

Align text right in-line with Bootstrap 4

html

css

twitter-bootstrap-4

bootstrap-4

Bootstrap 3

Bootstrap 4

补充