Twitter bootstrap 水平窗体中的右对齐控件标签

我正在尝试使用Twitter Bootstrap 3.2.0制作一个两列表单，其行为如下：

在超小的xs屏幕上，第二列显示在第一列的下方，控制标签显示在输入字段的上方 在小型sm屏幕上，两列并排显示，控制标签显示在输入字段上方 一个中等md屏幕，两列并排显示，控件标签与其输入字段水平对齐 我下面的代码也有一个问题：在小屏幕上，控件标签显示在其输入字段上方，但它们是右对齐的，而不是正确的左对齐

原因是forms.less中的引导基于媒体查询右对齐：

form-horizontal {
  @media (min-width: @screen-sm-min) {
    .control-label {
      text-align: right;
      margin-bottom: 0;
      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
    }
  }

有没有一种方法可以教引导使用不同的媒体查询，比如@screen md min，而不必修改引导源本身，即在另一个包含@import bootstrap/less/bootstrap.less的less文件中重写它？特别是，我不是在查询屏幕宽度，而是在查询当前列的宽度，这样做是否可能？否则，它将影响具有单列布局且仍水平对齐的其他表单。或者有没有其他更好的方法来实现我描述的响应行为

    <div class="container-fluid">
        <form class="form-horizontal" role="form" action="#">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <div class="form-group col-xs-12 col-sm-12 col-md-12">
                    <label class="control-label col-xs-12 col-sm-12 col-md-3">First name</label>
                    <div class="col-xs-12 col-sm-12 col-md-9">
                        <input type="email" class="form-control" placeholder="Enter email"/>
                    </div>
                </div>

                <div class="form-group col-xs-12 col-sm-12 col-md-12">
                    <label class="control-label col-xs-12 col-sm-12 col-md-3">Last name</label>
                    <div class="col-xs-12 col-sm-12 col-md-9">
                        <textarea class="form-control">
                        </textarea>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6">
                <div class="form-group col-xs-12 col-sm-12 col-md-12">
                    <label class="control-label col-xs-12 col-sm-12 col-md-3">Phone number</label>
                    <div class="col-xs-12 col-sm-12 col-md-9">
                        <textarea class="form-control">
                        </textarea>
                    </div>
                </div>

                <div class="form-group col-xs-12 col-sm-12 col-md-12">
                    <label class="control-label col-xs-12 col-sm-12 col-md-3">Remarks</label>
                    <div class="col-xs-12 col-sm-12 col-md-9">
                        <input type="email" class="form-control" placeholder="Enter email"/>
                    </div>
                </div>
            </div>
        </form>
    </div>

您可以将类左标签添加到上述表单中的每个标签，然后使用此CSS左对齐文本：

label.col-sm-12.left-label {
        text-align: left;
}

.

您可以将类左标签添加到上述表单中的每个标签，然后使用此CSS左对齐文本：

label.col-sm-12.left-label {
        text-align: left;
}

---

.

我遇到了同样的问题，我希望标签通过col-xs-12显示在xs屏幕大小的输入上方。我想出了以下媒体查询和使用方法！重要信息：覆盖引导应用的文本右对齐：

@media (min-width: 768px) {
    label.col-xs-12 {
      text-align: left !important;
    }
}

---

我也遇到了同样的问题，我希望标签通过col-xs-12显示在xs屏幕大小的输入上方。我想出了以下媒体查询和使用方法！重要信息：覆盖引导应用的文本右对齐：

@media (min-width: 768px) {
    label.col-xs-12 {
      text-align: left !important;
    }
}