css - Twitter引导程序覆盖“导航栏”中的“a”

Question

如何padding在a_navbar

我得到以下作为css规则

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

我想拥有padding: 5px, 5px, 5px

score 3 · Accepted Answer

要“覆盖”一种样式，我们需要一个更具体的规则。接受的答案使用!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">

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

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

score 2 · Accepted Answer

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

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

所以你有几个选择：

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

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

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

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

score 0 · Accepted Answer

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

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

3 回答 3