Css Twitter引导覆盖导航栏中的'a'`

如何在

navbar

我得到了以下css规则

.navbar .nav > li > a { float: none; padding: 10px 15px 10px; color: #555555; text-decoration: none; text-shadow: 0 1px 0 #ffffff; } .navbar.nav>li>a{ 浮动：无； 填充：10px 15px 10px； 颜色：#555555； 文字装饰：无； 文本阴影：0 1px 0#ffffff； }

---

我希望有

填充：5px，5px，5px

使用引导有问题，它很好，直到你不得不修改它

我通过进入

bootstrap.css

并搜索“.navbar.nav”（我在RubyonRails项目中也使用bootstrap）找到了您的特定规则，它大约在4380行。（这是针对未缩小的版本）

所以你有几个选择：

• 您可以在那里找到它并修改规则

• 如果您只需要在少数情况下使用它，则可以内联重写它

• 你可以把它放在你知道的css文件中（我假设你使用rails），rails会将它预编译成twitters规则（在css中，最后读取的规则就是应用的规则）

• 或者您可以编写自己的规则并使用

  ！重要信息

  在规则末尾。看起来是这样的：

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

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

需要注意的是：您实际上应该使用非小型版本的引导进行开发。当rails编译用于部署的资产时，它将为您缩小资产。使修改第三方文件更容易处理100倍

---

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

要“覆盖”样式，我们需要更具体的规则。接受的答案使用

！重要信息

规则，请参见。与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">

---

您可以在元素中添加一个类

my padding

，并在

app.css

中使用以下内容，在

bootstrap.css

之后链接到

html

.navbar nav>li>.my padding{
填充物：5px 5px 5px；
}

打开css样式表并按ctrl+f组合键。输入“.navbar.nav>li>a”我怀疑你没有使用过Twitter Bootstrap，为什么？正如下面的陈述，您可以在第4380行找到。使用find函数可以很容易地找到它。@DanMyasnikov是的，我最近不得不做同样的事情。这是一个痛苦：（最好不要直接修改引导程序-使用！对你自己的规则很重要-如果需要的话，可以让以后更容易地更新引导程序文件选项1：我不会直接修改引导程序，当它更新时，你会完蛋的。@JackieChan我知道，哈哈。

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