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

我的问题是以下

为什么第二个选项不起作用？

第一个选择是工作是正确的方法，也许有更好的方法来做到这一点......

当文本在某些标签和文本框中左对齐时，如果我想要标签和文本框，则会有很多空格   我怎么能这样做？

编辑，

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规则在引导程序或基础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%; }

引导文本对齐到左边

1 个答案: