Bootstrap 隐藏类

Question

我在使用Bootstrap和WordPress管理面板时遇到了问题。

基本上，我安装了一些Bower组件，当我构建我的项目时，它们会被连接在一起(包括CSS和JS)。

问题是：Bootstrap的.hidden类使用了!important

这对我来说是一个问题，因为WordPress管理面板上的一些元素看起来像这样：

... class=".... hidden" style="display:none" ...>

他们既有.hidden类，又有内联样式。

Wordpress默认的.hidden类被Bootstrap类替换了，因此内联样式被忽略了，Bootstrap的!important防止它从display:none更改为display:block。

不幸的是，我需要在后端使用Bootstrap进行很多其他事情。

有没有办法可以替换这个类？（我只想去掉!important，其他保持不变）

理想情况下，不更改Bootstrap核心CSS，以便更新安全。

附注：Bootstrap 4会有所不同吗？如果能解决这个问题，我不介意更新。

谢谢

- Nick

---

他们用.hidden-xs-up替换了Twitter Bootstrap 4中的.hidden类（链接）。 - tmg

谢谢。我会研究一下Bootstrap 4。 - Nick

我尝试使用新的Bootstrap4 alpha版本，但它仍然存在且仍然无法正常工作...有什么想法吗？ - Nick

Answer 1

最终我决定使用http://getbootstrap.com/docs/3.3/customize/，创建一个包含我需要的Bootstrap主题。这样，我可以仅包含特定的Bootstrap精简版本，其中只包含按钮和图标（这正是我在后端所需的），而不再出现类冲突问题。

- Nick

Answer 2

您可以使用jQuery的$('the_CSS_Type_Selector').removeClass('TheClassToRemove')来删除类。 并且您可以使用.attr()更改属性。

参考- 1. Stack Answer 2. jQuery .removeClass

- Vishal Kumar Sahu

---

谢谢您的建议，但这意味着我必须在WordPress的整个管理部分中搜索该类的每个实例。说实话，我希望有一个更通用的解决方法。 - Nick

CSS中的继承和优先级也可以帮助您解决问题。CSS中更具体的选择器越有效。例如，html {color: blue !important} 可以被 html.no-js{color: red !important} 覆盖。 - Vishal Kumar Sahu

如果您可以粘贴情况（HTML代码和检查元素中的CSS），那么我可以告诉您具体的选择和解决方法... - Vishal Kumar Sahu

是的，我知道。不幸的是，我有很多东西要改变CSS，并且使用这种方法不是一个选项，因为元素是可变的，甚至可能有很多（也有成百上千个）。 - Nick

然后尝试编辑核心文件，但要确保它们不会影响其他事情... - Vishal Kumar Sahu

Answer 3

你可以从Bootstrap CSS中删除!important。

如果你的机器上没有这些文件，你需要下载它们。

- user7094598

---

我使用bower进行安装，这意味着每次我下载bootstrap时都需要再次应用相同的更改，这并不真正是更新安全的。 - Nick