Bootstrap 4 text-left类异常表现：是用法错误还是框架Bug？

嘿，我来帮你捋清楚这个问题——这绝对不是Bootstrap的框架Bug，而是你把网格类和form-inline组合使用时，触发了布局样式的冲突导致的。

问题出在哪？ #

咱们拆开看：

1. form-inline的特殊行为：在Bootstrap里，当屏幕宽度≥768px时，form-inline会把内部的表单元素改成display: inline-block来实现横向排列，同时它会给内部的<label>元素默认加上text-align: right的样式。这个样式的权重比单独的text-left类更高（因为是.form-inline label这样的选择器，权重叠加后更高），直接把你的text-left给覆盖了。
2. 小屏幕为啥正常？：当屏幕宽度小于768px时，form-inline会自动取消横向排列的规则，<label>变回普通的块级元素，这时候text-left的样式就不受干扰，自然生效了。

给你几个解决办法，按需选就行： #

• 办法一：换掉form-inline，用网格系统搭布局
  如果不需要form-inline的特殊效果，直接用Bootstrap的row+网格类来实现横向布局，就不会有样式冲突了：

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

• 办法二：提高text-left的优先级
  要是必须保留form-inline，那咱们就给text-left加个更高权重的样式覆盖默认规则：
  可以写个自定义CSS：

  .form-inline .text-left {
    text-align: left !important;
  }
  

  或者临时用内联样式救急（不过不推荐大量用哈）：

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

• 办法三：用针对全尺寸的对齐类（Bootstrap 3适用）
  如果你用的是Bootstrap 3，那text-left其实是专门给≥768px屏幕用的，而text-xs-left才是对所有屏幕生效的左对齐类，替换之后就能在所有尺寸下都正常显示了：

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

总结一下 #

核心就是form-inline在大屏幕下给<label>加了更高优先级的右对齐样式，把你的text-left给盖过去了。选个合适的布局方式，或者调整样式优先级，就能搞定这个问题啦～

内容的提问来源于stack exchange，提问作者tretom