html - 覆盖CSS中的显示

Question

我在 Asp.net MVC 上使用 Bootstrap 。我有一个自定义 Styles.css，我用它来设置我想要从 bootstrap.css 中的默认值更改的值。

我正在尝试为 MM YY(月年)获取两个彼此相邻的文本框。

在 Bootstrap 中它有:

display: block;

在我的 Styles.css 中，我创建了这个来覆盖那个值:

.disableblock{
  display: inline;
}

这是我的 .cshtml 中的行:

截止日期

<div class="col-sm-8">
  @Html.TextBoxFor(m => m.ExpirationDateMonth, new { @class = "form-control expirationdatetextbox disableblock", @maxlength = "2", placeholder = "MM" })
  @Html.TextBoxFor(m => m.ExpirationDateYear, new { @class = "form-control expirationdatetextbox", @maxlength = "2", placeholder = "YY" })
</div>

<div class="warning">
  @Html.ValidationMessageFor(m => m.ExpirationDateMonth)
</div>

当我在IE中显示时，显示如下:

如果我取消选中 display: block;，它会将两个文本框放在同一行。

为什么 Styles.css 内联不覆盖 bootstrap.css 中的 block ？d

编辑

对于那些质疑 css 调用顺序的人:

  bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css",
    "~/Content/justified-nav.css",
    "~/Content/Styles.css")); // <-- Custom CSS file

这是来自 View 源:

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/justified-nav.css" rel="stylesheet"/>
<link href="/Content/Styles.css" rel="stylesheet"/>

Answer 1

尝试将 !important 放在显示值之后。如果这不起作用，请确保在加载 Bootstrap 代码时，您是在自定义 css 之前这样做的。有时，如果您首先加载自定义 css，即使您使用的是 !important，bootstrap 似乎也会覆盖。如果这有帮助，请告诉我。