将文本与Bootstrap 4对齐

Question

我目前正在使用bootstrap 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版本

Bootstrap 3

使用班级text-right

Bootstrap 4

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

Additionals

您可以在this question中查看更多内容，或查看official documentation v4

Answer 3

我不使用Bootstrap，我使用Materialise但你可以添加正常的样式，
在你的

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

这只会将你的锚标签对齐到右边

Answer 4

使用此线......

<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 5

使用此课程文字右侧 ..

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