无法使此媒体查询与 bootstrap 3 样式一起使用答案

【问题标题】：Can't get this media query working with boostrap 3 styles无法使此媒体查询与 bootstrap 3 样式一起使用
【发布时间】：2014-06-07 06:03:21
【问题描述】：

我想通过桌面用户的媒体查询更改 div\grid 的宽度，但无法应用样式。

这是 Chrome 开发工具中的 div：

所以我想设置我的 .ticketInforHeader div 的宽度。我试图这样做，但它什么也没做：

@media screen and (min-width: 992px) {
    .ticketInfoHeader {
        width 30%;
    }
}

【问题讨论】：

您的 sn-p 中的 width 和 30% 之间缺少一个冒号 (:)。这只是一个错字，还是您的实际代码中的错字？如果是后者，您需要在发现任何其他问题之前解决该问题。
哈哈哈现在我觉得自己很笨。是的，这似乎是问题所在。没有错字的相同代码可以正常工作。谢谢。

【解决方案1】：

我猜如果您使用的是 Bootstrap 的网格，那么列的宽度将由已经存在的类定义，例如 .col-md-4

您可能需要添加 !important 来覆盖 Bootstrap 样式

@media screen and (min-width: 992px) {
  .ticketInfoHeader.col-md-4 {
    width 30% !important;
  }
}

但这在代码中看起来不太好，我觉得它破坏了使用引导程序网格的逻辑。

【讨论】：

【解决方案2】：

尝试使用

@media screen and (min-width: 992px) {
    .ticketInfoHeader {
        width 30% !important;
    }
}

【讨论】：

带有 !important 的事件没有任何作用。另外，我不应该尽可能避免 !important 吗？
是的，您应该避免使用 !important，但是在这里您需要覆盖 .col-md-4 的引导 css 样式，因此我给出了一个微不足道的答案，遗憾的是没有工作。你能再分享一些 HTML 和 css 吗？