使用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>

- xcomsw

Answer 1

为了使 ml-auto 类起作用，您只需要向父元素添加 d-flex 类（显示: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>

- WebDevBooster

---

这是唯一有效的答案，谢谢！ - xcomsw

完成，再次感谢！ - xcomsw

Answer 2

这取决于你使用的 Bootstrap 版本。

Bootstrap 3

使用类 text-right。

Bootstrap 4

在最新版本中，你可以使用类 text-lg-right，当然，你可以根据所需的视口大小来使用其他大小。

补充

你可以在此问题中查看更多信息，或者查阅官方文档v4。

- dstrants

Answer 3

我不使用Bootstrap，而是使用Materialize，但你可以为其添加普通的样式，
在你的代码中。

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

这将只使您的锚点标签向右对齐。

- Dustbin Saves you

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>

- vidarshana

---

但这会将我的所有文本都对齐到右侧，我只想让特定的文本右对齐，标题应该保持在左侧。 - xcomsw

啊，好的...把这个代码放在你的文本行上，它可以正常工作...我用的是这个...不要把它用于整行... - vidarshana

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

Answer 5

请使用这个类 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>

- Sarvan Kumar