将文本与 Bootstrap 4 对齐 [重复]

Posted 2023-03-05

【中文标题】将文本与 Bootstrap 4 对齐 [重复]

【英文标题】：Align text right in-line with Bootstrap 4 [duplicate]

【发布时间】：2018-07-14 22:40:48

【问题描述】：

我目前正在使用引导程序 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>

【参考方案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>

【讨论】：

但这会将我的所有文本都对齐在右侧，我只希望特定文本向右对齐，标题应保留在左侧。

啊好吧...把这条线放在你的文本行上它工作正常...我用这个...不要在整行上都用这个....

媒体库

【参考方案2】：

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

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

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

【参考方案3】：

这取决于您使用的 Bootstrap 版本

引导程序 3

使用类text-right

引导程序 4

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

补充

您可以在this question 中查看更多信息或查看official documentation v4

【参考方案4】：

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

【参考方案5】：

为了使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>

【讨论】：

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

完成，再次感谢！