Twitter引导程序覆盖“导航栏”中的“a”答案

【问题标题】：Twitter bootstrap override `a` in `navbar`Twitter引导程序覆盖“导航栏”中的“a”
【发布时间】：2012-11-16 10:50:05
【问题描述】：

如何在navbar 中覆盖padding 上的a

我得到了以下作为css规则的

.navbar .nav > li > a {
  浮动：无；
  填充：10px 15px 10px；
  颜色：#555555；
  文字装饰：无；
  文字阴影：0 1px 0 #ffffff;
}

我想要padding: 5px, 5px, 5px

【问题讨论】：

【解决方案1】：

您可以在您的元素中添加一个类 my-padding 并在您的 app.css 中使用以下内容，您可以在 bootstrap.css 之后链接到您的 html

.navbar-nav > li > .my-padding {
    padding: 5px 5px 5px;
}

【讨论】：

【解决方案2】：

要“覆盖”一种样式，我们需要一个更具体的规则。接受的答案使用!important 规则，即should be a last resort。与 CSS 的常见情况一样，我们有很多可用的选项。

选项 1：创建一个额外的类

.primary.navbar .nav > li > a {
    padding: 5px 5px 5px;
}

选项 2：重复上课

.navbar.navbar .nav > li > a {
    padding: 5px 5px 5px;
}

允许重复出现相同的简单选择器并执行增加特异性。

选项3：使用相同的类，但在引导后定义这个类

 <link rel="stylesheet" href="bootstrap.css">
 <link rel="stylesheet" href="modify_bootstrap.css">

如果你还不知道，type="text/css" isn't required in HTML5

.navbar .nav > li > a {
    padding: 5px 5px 5px;
}

【讨论】：

【解决方案3】：

使用引导程序存在问题，在您必须修改它之前它很好。

我通过进入bootstrap.css 并搜索“.navbar .nav”（我也在 ruby on rails 项目中使用引导程序）找到了您的特定规则，它在 4380 行附近。（这是未缩小的版本)

所以你有几个选择：

这很危险，（从长远来看，它会使您的 css 更难维护。）但如果所有其他方法都失败了，这仍然是一个有效的选择。

请注意：您实际上应该使用未缩小版本的引导程序进行开发。当 rails 编译你的资产进行部署时，它会为你缩小它。使修改第 3 方文件 100 倍更容易使用。

（这也假设您没有使用引导 gem 来导入您的 css，在这种情况下，请参阅上述选项之一）

【讨论】：