html - Bootstrap 文本左对齐

Question

我有以下代码，我需要将我的文本左对齐

@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2 oper-label" })

当我这样做时，我喜欢按照它的工作原理和文本向左对齐。

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: left;
  }
}

但是当我尝试在第二节课上这样做时，它不起作用

.oper-label {
    font-weight: normal;
    text-align: left;
}

我的问题如下

1. why the second option is not working?
2. does the first option which is work is the right way to do it,maybe there is better way to do that...
3. when the text is align to left now in some labels and textboxes there is much spaces if I want that the label and the text box will be closer how can I do that ?

编辑，

html代码如下

<label class="control-label col-md-2 operation-label" for="Name"> Name</label>


    <div class="col-md-10">
                    <input class="text-box single-line" data-val="true" data-val-length-max="30" data-val-regex="Invalid Provider Name" data-val-required="Name field is required." id="ExternalName" name="Name" type="text" value="">
                    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
                </div>

Answer 1

您可以使用!important:

.oper-label {
    font-weight: normal;
    text-align: left !important;
}

但作为使用前端框架(例如 Bootstrap 和 Foundation)时的一般建议，始终确保您的自定义 CSS 规则位于 Bootstrap 或基础 CSS 规则之后(在页面内链接样式表文件时)。这样，您可以根据需要覆盖它们的样式。

一旦你这样做了，你可以简单地声明:

.control-label.oper-label {
    font-weight: normal;
    text-align: left;
}

至于文本框和左对齐 标签之间的间距问题，您可以将.col-xs-1 类添加到您的.control- label 或覆盖 bootstrap 的固定宽度标签并为 .control-label 设置自定义百分比宽度:

.form-horizontal .control-label { width: 25%; }