Bootstrap 4 text-left class 奇怪的行为

Question

我尝试在 <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 中的错误？

Answer 1

这是因为 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>

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

Bootstrap 4 text-left class 奇怪的行为

Bootstrap 4 text-left class strange behaviour

forms

bootstrap-4

inline

text-alignment