Twitter引导覆盖`navbar`中的`a`

Question

如何ovveride padding上a在navbar

我得到以下作为CSS规则

.navbar .nav > li > a {
  float: none;
  padding: 10px 15px 10px;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
}

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

Answer 1

要“覆盖”样式，我们需要更具体的规则。 接受的答案使用!important规则，这应该是不得已的方法。 与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">

如果您还不知道这一点，则HTML5中不需要 type="text/css"

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

Answer 2

还有使用引导程序的问题，它很不错，直到您必须对其进行修改为止。

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

因此，您有几种选择：

您可以在其中找到并修改规则。
如果只需要几个，则可以内联覆盖它。
您可以将其放在您知道的css文件中（我假设您使用的是rails），rails将对其进行预编译，以使其晚于twitters规则（在css中，最后读取的规则是应用的规则）。
或者，您可以编写自己的规则，并在规则末尾使用!important 。 看起来像这样：
```
 .navbar .nav > li > a { padding: 5px 5px 5px !important; } 
```

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

注意：实际上，您应该使用引导程序的最小版本进行开发。 当Rails编译要部署的资产时，它将为您最小化。 使修改第三方文件100倍易于使用。

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

Answer 3

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

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