Twitter的bootstrap重写`a`在`navbar` [英] Twitter bootstrap override `a` in `navbar`

查看:159
本文介绍了Twitter的bootstrap重写`a`在`navbar`的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何ovveride padding 在 a 在 navbar

How to ovveride padding on a in navbar

我得到以下作为

.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 / p>

and I would like to have padding: 5px, 5px, 5px

推荐答案

并且有使用bootstrap的问题,它很好,直到你必须修改它。

And there is the problem with using bootstrap, its nice until you have to modify it.

通过进入 bootstrap.css 并搜索.navbar .nav也可以在ruby on rails项目中使用引导)它在4380行左右(这是未缩小的版本)

I found your particular rule by going into bootstrap.css and searching for ".navbar .nav" (I also use bootstrap in a ruby on rails project) it was around line 4380. (this is for the un-minified version)

所以你有几个选项:


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

  • You can find it and modify the rule there.

您可以将其放在一个css文件中(我假设您使用rails)

You can put it in a css file you know (I am assuming your using rails) rails will pre-compile it to be later then twitters rule (in css the last rule read is the one applied).

或者你可以编写自己的规则并在规则末尾使用!important 。这将是这样:

Or you could write your own rule and use !important at the end of the rule. That would look like this:

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


(它可以使它更难以维护你的css长期。)但仍然是一个有效的选项,如果所有其他失败。

Which is dangerous, (it can make it harder to maintain your css in the long run.) But still a valid option if all else fails.

注意:你实际上应该使用unstrified版本的bootstrap进行开发。当rails编译您的资产进行部署时,它会为您进行缩小。使修改第三方文件100倍更容易使用。

As a note: You should actually be using the un-minified version of bootstrap for development. When rails compiles your assets for deployment, it will minify it for you. Makes modifying 3rd party files 100x easier to work with.

(这也假设您没有使用引导程序gem导入您的css,在这种情况下请看上面的选项之一)

(This also assumes your not using a bootstrap gem to import your css, in which case see one of the options above)

这篇关于Twitter的bootstrap重写`a`在`navbar`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆