質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

解決済

Bootstrapでnavの文字色が変更できない

paopao_1111
paopao_1111

総合スコア4

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1回答

0リアクション

0クリップ

203閲覧

投稿2022/07/28 06:24

編集2022/07/28 06:53

前提

railsで作成中のソフトに、Bootstrapでナビゲーションバー(navbar)を導入しようとしています。

ナビゲーションバーの背景色と文字色を変更しようとしたところ、「背景色とタイトルのみ」変更が反映されてリンクへの反映が行われない状況です。

Bootstrapのバージョンは、4です。

不足情報あれば、教えていただけると幸いです。
お忙しいかとは存じますが、よろしくお願いいたします。

該当のソースコード

<header class="shadow-sm"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand p-3" href="/">Bookers</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <% if user_signed_in? %> <li class="nav-item"><div class="nav-link"><%= link_to current_user do %> <i class="fas fa-home"></i>Home<% end %></div> </li> <li class="nav-item"><div class="nav-link"><%= link_to '/users' do %> <i class="fas fa-users"></i>Users<% end %></div> </li> <li class="nav-item"><div class="nav-link"><%= link_to '/books' do %> <i class="fas fa-book-open"></i>Books<% end %></div> </li> <li class="nav-item"><div class="nav-link"><%= link_to destroy_user_session_path, method: :delete do %> <i class="fas fa-sign-out-alt"></i>Log out<% end %></div> </li> <% else %> <li class="nav-item"><div class="nav-link"><%= link_to '/' do %> <i class="fas fa-home"></i>Home<% end %></div> </li> <li class="nav-item"><div class="nav-link"><%= link_to about_path do %> <i class="fas fa-link"></i>About<% end %></div> </li> <li class="nav-item"><div class="nav-link"><%= link_to new_user_registration_path do %> <i class="fas fa-user-plus"></i>Sign up<% end %></div> </li> <li class="nav-item"><div class="nav-link active"><%= link_to new_user_session_path do %> <i class="fas fa-sign-in-alt"></i>Log in<% end %></div> </li> <% end %> </ul> </div> </div> </nav> </header>

試したこと

SCSSでの文字色の指定。
nav-itemに入れることでアイコン・文字共に変更されると思い入れました。

SCSS

.nav-item { text-decoration: none; color: white ; }

.text-whiteなどの記載(アイコンのみ変更される。)

<ul> <li> <div>にそれぞれの””に追記した形になります。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/07/28 06:39

利用しているBootstrapのバージョンを質問本文に追記してください。 4,5では大きくは違わないとは思いますが、念のため。
m.ts10806

2022/07/28 06:41

あと、2点。 ①どこにあるどの指定で変更されると思って対応したのか ②text-whiteはどこにどのように入れたのか
m.ts10806

2022/07/28 06:43 編集

すみません。もう1点。 たぶんそのタイトルのアイコン、自分で絵文字入れられてませんか? 質問投稿文のタイトル横にある「初心者アイコン」をON(活性化)する対応に切り替えてください。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。