Bootstrap 4 text-left 类奇怪的行为答案

【问题标题】：Bootstrap 4 text-left class strange behaviourBootstrap 4 text-left 类奇怪的行为
【发布时间】：2020-06-21 10:05:19
【问题描述】：

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

【问题讨论】：

col-12 中不应该有 col-10。 “内容必须放在列中，并且只有列可以是行的直接子级” 创建一个演示问题的 codeply sn-p。

标签： forms bootstrap-4 inline text-alignment

【解决方案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>

并且不要在没有一行的 col 中使用 cols。

【讨论】：