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>
并且不要在没有行的列中使用列。
我尝试在 <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>
并且不要在没有行的列中使用列。