前提・実現したいこと
現在Railsを勉強中です。
Bootstrapでのデザイン適用をしていて、少し疑問に思ったことがあります。
RailsでBootstrapでボタンのデザインをしていましたが、クラス属性btn btn-primary
のみですと、リンク作成時にテキストの色が黒くなってしまいました。白くなってほしいのに。その理由が知りたいです。
発生している問題
▼index.html.erb
html
1<a href="/questions/new" class="btn btn-primary text-white">New Question</a> 2<a href="/questions/new" class="btn btn-primary">New Question</a> 3<a href="#" class="btn btn-primary">New Question</a>
上記のようにBootstrapを使って、リンクをボタンに見せています。
・その際、クラス属性btn btn-primary
のみですと、文字色が黒くなってしまっています。(2つ目)
・クラス属性btn btn-primary text-white
として、color: #fff!important;
が設定されると、さすがに文字色は白になります。(1つ目)
・href属性にパスが設定されず、#
となっていると、文字色は白くなります。(3つ目)
これを単純なHTMLで試すと、問題なく、3パターンとも文字色が白くなりました。
なのでRails環境内で行っていることが作用しているのかなと予想します
それがSCSSだから、コンパイルするからなのか、Rails特有の処理だからなのかは特定できていません。
デバッグツールで確認すると、2つ目のボタンもCSS自体はcolor:white
が適用されています。
なのに黒文字になるのが不思議です。
この現象を理解したいです。
もしわかる方がいれば教えていただけると助かります。
よろしくお願い致します。
補足情報(FW/ツールのバージョンなど)
bootstarap v5.0
ruby '2.6.6'
rails '6.1.3'
回答1件
あなたの回答
tips
プレビュー