将文本与Bootstrap 4对齐

Question

我当前正在使用引导程序4。我试图在卡头上对齐文本，我尝试使用，ml-auto但是它不起作用。有什么解决方案？

这是我的卡头代码：

<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

为了使ml-auto类正常工作，您只需要将d-flex类（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>

Answer 2

这取决于您使用的Bootstrap版本

引导程序3

使用课程 text-right

引导程序4

在最新版本中，您可以使用text-lg-right您喜欢的视口大小来使用该类

附加项

您可以在此问题中查看更多信息或查看官方文档v4