我正在尝试创建如下所示的标题:

水平线必须来自视口的左侧，并在标题结束的同一点结束。理想情况下，我希望所有东西都在引导列中。所以我的标记现在如下所示:

我希望保持HTML标记不变。我可以在列内添加更多的元素，没问题。最好不要把任何东西放在该列div之外。

---

顺晟科技：

我终于得到了一个解决方案，应该适用于任何屏幕大小。多亏了这些回应，我才找到了这个解决方案:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A great title</h2>
            </div>
        </div>
    </div>
</div>

此代码将完成该任务

只需将边框顶部应用于标题并调整填充即可: