2

でovveridepaddingする方法anavbar

私はcssルールとして次のものを手に入れました

.navbar .nav> li> a {
  フロート：なし;
  パディング：10px 15px 10px;
  色：＃555555;
  テキスト装飾：なし;
  text-shadow：0 1px 0 #ffffff;
}

と私はしたいpadding: 5px, 5px, 5px

4

3 に答える 3

3

スタイルを「オーバーライド」するには、より具体的なルールが必要です。受け入れられた回答は、最後の手段となる!importantルールを使用しています。CSS ではよくあることですが、利用できるオプションはたくさんあります。

オプション 1:追加のクラスを作成する

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

オプション 2:クラスを繰り返す

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

W3C:

同じ単純なセレクターを繰り返し使用することは許可されており、具体性が向上します。

オプション 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;
}
于 2014-07-25T13:10:38.003 に答える
2

また、ブートストラップの使用には問題があります。変更する必要があるまでは問題ありません。

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 を使用していないことも前提としています。その場合は、上記のオプションのいずれかを参照してください)

于 2012-11-28T14:49:31.227 に答える
0

my-padding要素にクラスを追加し、 after にapp.cssリンクする以下を使用できます。htmlbootstrap.css

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

于 2015-02-10T10:12:05.957 に答える