Bootstrap在移动

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 4，但以下内容适用于Bootstrap 3

!important

上设置了.text-right

您也可以设置!important。我可能会建议不要使用.text-right类，也可以自己制作。使用!important覆盖另一个!important让我感到畏缩。我不推荐它，我建议尽可能不频繁使用!important。我可以理解为什么Bootstrap在这里使用它。

我会给你两个选择。

这是你能做的：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的建议：

＆＃13;

＆＃13;

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

＆＃13;

<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 align-label">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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