でovveridepadding
する方法a
navbar
私はcssルールとして次のものを手に入れました
.navbar .nav> li> a { フロート:なし; パディング:10px 15px 10px; 色:#555555; テキスト装飾:なし; text-shadow:0 1px 0 #ffffff; }
と私はしたいpadding: 5px, 5px, 5px
でovveridepadding
する方法a
navbar
私はcssルールとして次のものを手に入れました
.navbar .nav> li> a { フロート:なし; パディング:10px 15px 10px; 色:#555555; テキスト装飾:なし; text-shadow:0 1px 0 #ffffff; }
と私はしたいpadding: 5px, 5px, 5px
スタイルを「オーバーライド」するには、より具体的なルールが必要です。受け入れられた回答は、最後の手段となる!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;
}
また、ブートストラップの使用には問題があります。変更する必要があるまでは問題ありません。
bootstrap.css
「.navbar .nav」にアクセスして検索することで、特定のルールを見つけました(Ruby on Railsプロジェクトでもブートストラップを使用しています)4380行目あたりでした(これは縮小されていないバージョン用です)。
したがって、いくつかのオプションがあります。
それを見つけて、そこでルールを変更できます。
少数で必要な場合は、インラインでオーバーライドできます。
あなたが知っているcssファイルにそれを置くことができます(私はあなたがRailsを使用していると仮定しています)Railsはそれを後でtwitterルールになるようにプリコンパイルします(cssでは最後に読み取られたルールが適用されます)。
!important
または、独自のルールを記述して、ルールの最後で使用することもできます。それは次のようになります。
.navbar .nav > li > a {
padding: 5px 5px 5px !important;
}
これは危険です (長期的には css を維持するのが難しくなる可能性があります)。しかし、他のすべてが失敗した場合でも有効なオプションです。
注:実際には、開発には縮小されていないバージョンのブートストラップを使用する必要があります。Rails がデプロイ用にアセットをコンパイルすると、それが縮小されます。サード パーティのファイルの変更を 100 倍簡単に操作できます。
(これは、css のインポートにブートストラップ gem を使用していないことも前提としています。その場合は、上記のオプションのいずれかを参照してください)
my-padding
要素にクラスを追加し、 after にapp.css
リンクする以下を使用できます。html
bootstrap.css
.navbar-nav > li > .my-padding {
padding: 5px 5px 5px;
}