覆盖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中的块？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

这是来自观察源：

<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放在显示值之后。如果这不起作用，请确保在加载引导代码时，在自定义css之前这样做。有时，如果您加载自定义CSS，即使您使用!important，第一个引导程序似乎也会覆盖。如果这有帮助，请告诉我。

Answer 2

你可以

覆盖样式后
• 添加！important：display：inline！important;
• 重新排序样式参考，以便styles.css在bootstrap之后
• 使用您的选择器更具体：input.form-control.displayblock {}