0
:ブートストラップナビゲーションバー:私は、単純なCSSコードを、背景色と私のブートストラップナビゲーションバーのフォントの色を変更したいoveridingフォントの色
#mainNav {
overflow: hidden;
background-color: transparent;
\t color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.navbar a{
\t color: #333;
}
私は透明な背景を取得し、フォント色は
白(代わりにブラック)私のブートストラップナビゲーションバーコードがfolowsのようである:
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><img src="img/abc.png" alt="logo" width="72" height="68" id="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">portfolio</a>
</li>
<li>
<a class="page-scroll" href="#portfolio_sectors">Sectors</a>
</li>
<li>
<a class="page-scroll" href="#my_carousel">References</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
私は私が間違っているのかを把握することはできません。
私が完全にブートストラップnewbyであるので、このより高い特異性のルールについて私に知らせるために、Obsidianに感謝します。ブートストラップテンプレートを使用しているので、その背後にあるすべてのCSSを理解しようとするのは圧倒的です。 あなたの提案に従ってコードを変更しました。隔離されたときに機能させることができますが、テンプレートでは一度は実行されません。 私はテンプレートコードのどこかでHigher Specificityについてもう一度やっていると思いますが、それを見つけることはできません。 –
問題はありません。それはあなたが確かにCSSに留意したいと思う何かである!ブートストラップは本当に( 'bootstrap.css'だけでなく、' navbar.less'のようなファイルにも)たくさんのカスタムルールを追加します。 F12 Developer Toolsインスペクタ(「Rules」をチェック)を使用して、どのルールが追加されているかを確認することをおすすめします。 「Computed」はどのアプリケーションが適用されているかを表示します。この作業例を「ベース」として開始し、動作が停止するまでゆっくりと適用します。問題を知り、ルールをチェックすることができます。上書きするのに '!important'を使うことを忘れないでくださいが、それは最後の手段にすぎません;) –