Question

如何覆盖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

要覆盖＆＃39;我们需要一种更具体的规则。接受的答案使用!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：使用相同的类，但在bootstrap

之后定义此类

 <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;
}

Answer 2

使用bootstrap存在问题，直到你必须修改它才会很好。

我找到了你的特定规则，进入bootstrap.css并搜索“.navbar .nav”（我也在rails项目中的ruby中使用bootstrap）它位于第4380行附近。（这是为了缩小版）

所以你有几个选择：

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

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

作为一个注释：您实际上应该使用未缩小版本的bootstrap进行开发。当rails编译您的资产以进行部署时，它会为您缩小它。使修改第三方文件100x更容易使用。

（这也假设你没有使用bootstrap gem来导入你的css，在这种情况下看到上面的一个选项）

Answer 3

您可以在元素中添加课程my-padding，并在app.css之后使用以下内容html bootstrap.css

＆＃13;

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

＆＃13;