在移动设备上引导左对齐右文本类

Question

在我的表单标签上使用该类text-right，当进行响应时，我希望标签左对齐，因此它位于左上角而不是右上角，但是更改text-align:left似乎没有生效。

@media (max-width: 767px) {
  .form-group > label.text-right {
    text-align: left;
    color: red;
  }
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label text-right">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

Answer 1

Bootstrap 的文本对齐类是响应式的。您不需要任何额外的 CSS。
使用text-sm-right text-left...

<div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
</div>

演示： https: //www.codeply.com/go/djMd492DHA