Bootstrap 4 текста левого класса странное поведение

Question

Я попытался использовать 'text-left' на <div> и обнаружил, что он не работает. Поэтому я создал самый простой пример:

<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

Это из-за поведения flexform form-inline .

Вы должны использовать 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>

И не используйте столбцы внутри столбца без строки.