为什么 text-end 在 Bootstrap 5 中不起作用？

Answer 1

您的代码可以工作，但问题可能来自库或您正在使用的浏览器，所以我更喜欢使用官方 Bootstrap CDN。

官方 Bootstrap 文档

这是使用 Boostrap CDN 的代码示例：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  <div class="top-bar">
    <div class="container">
      <div class="col-12 text-end">
        <p><a href="teL: [phone]"> Bel ons </a></p>
      </div>
    </div>
  </div>

Answer 2

text-end

类正在运行，但还没有达到应有的程度。

<div class="top-bar">
    <div class="container">
        <div class="row">
            <div class="col-12 text-end">
                <p><a href="teL: [phone]"> Bel ons </a></p>
            </div>
        </div>
    </div>
</div>

来自 Bootstrap 5 文档...

“行是列的包装器。每列都有水平填充 （称为排水沟）用于控制它们之间的空间。这个填充 然后抵消具有负边距的行，以确保 列中的内容在视觉上是对齐的..”

因此

col-12

应该位于

row

..

内

<div class="top-bar">
    <div class="container">
        <div class="row">
            <div class="col-12 text-end">
                <p><a href="teL: [phone]"> Bel ons </a></p>
            </div>
        </div>
    </div>
</div>

演示