Bootstrap 4 text-left class 奇怪的行为

Bootstrap 4 text-left class strange behaviour

我尝试在 <div> 上使用 'text-left',但发现它不起作用。 所以我设置了我能想到的最简单的例子:

<form>
    <div class="col-12 form-inline">
        <label class="col-10 text-left" style="background-color:powderblue;">TestLabel</label>
    </div>
</form>

我在 https://www.codeply.com/ 上测试了它 结果是:它仅适用于 sm 屏幕尺寸。

宽度 360:

但在 768 及更高版本上:

我的问题是:我做错了什么,还是 Bootstrap 中的错误?

这是因为 form-inline 的 flexform 行为。

您必须使用 justify-content-start 而不是 text-left

<form>
    <div class="col-12 form-inline">
        <label class="col-10 justify-content-start" style="background-color:powderblue;">TestLabel</label>
    </div>
</form>

并且不要在没有行的列中使用列。