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

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

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

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

Bootstrap

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

Q&A

解決済

1回答

2342閲覧

Bootstrapで<button class="btn navbar-btn">のテキストの色を変えたい

hisataka

総合スコア19

Ruby on Rails

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

Bootstrap

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

0グッド

0クリップ

投稿2016/10/11 12:39

Railsでアプリケーションを作成していて、Bootstrapを使っています。

その中でテキストの色を変えたい部分があるのですが、変更ができません。

HTML

1<!-- Navigation --> 2<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 3 <div class="container"> 4 <!-- Brand and toggle get grouped for better mobile display --> 5 <div class="navbar-header"> 6 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 7 <span class="sr-only">Toggle navigation</span> 8 <span class="icon-bar"></span> 9 <span class="icon-bar"></span> 10 <span class="icon-bar"></span> 11 </button> 12 </div> 13 <!-- Collect the nav links, forms, and other content for toggling --> 14 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 15 <ul class="nav navbar-nav"> 16 <% if logged_in? %> 17 <li><%= link_to "OHUSE", creators_path %></li> 18 <li><%= link_to "fashioned", creators_fashion_path %></li> 19 <button class="btn navbar-btn" data-toggle="modal" data-target="#createTicket"> 20 Create 21 </button> 22 <li class="dropdown"> 23 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 24 Account <b class="caret"></b> 25 </a> 26 <ul class="dropdown-menu"> 27 <li><%= link_to "Profile", current_user %></li> 28 <% if current_user.admin %> 29 <li><%= link_to "Manage", kannri_path %></li> 30 <% end %> 31 <li class="divider"></li> 32 <li> 33 <%= link_to "logout", "/logout" %> 34 </li> 35 </ul> 36 </li> 37 38 39 40 <% else %> 41 <li><%= link_to "Log in", '/auth/twitter' %></li> 42 <% end %> 43 </ul> 44 </div> 45 <!-- /.navbar-collapse --> 46 </div> 47 <!-- /.container --> 48</nav> 49<nav class="navbar navbar-inverse" role="navigation"> 50</nav> 51 52 53 54<div class="modal fade" id="createTicket" tabindex="-1" role="dialog" aria-labelledby="dialogHeader" aria-hidden="true"> 55 <div class="modal-dialog"> 56 <div class="modal-content"> 57 <% 58 creator = Creator.new 59 %> 60 <%= form_for creator, :url => creators_path(creator), :class => "allow_submit" do |f| %> 61 <div class="modal-header"> 62 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 63 <h4 class="modal-title" id="dialogHeader"> 64 Let's create Ohuse!! 65 </h4> 66 </div> 67 <div class="modal-body"> 68 <%= f.label :name %> 69 <%= f.text_field :name, class: 'form-control' %> 70 <%= f.label :description %> 71 <%= f.text_area :description, class: 'form-control' %> 72 <%= f.label :image %> 73 <%= f.file_field :image, class: 'form-control' %> 74 <%= f.hidden_field :imagevalue, :value => "test" %> 75 <div class="p-tag"> 76 <%= f.label :tag %> 77 ※Enterで区切ってください! 78 </div> 79 <%= text_field_tag 'creator[tag_list]', creator.tag_list.join(','), :class => 'form-control', "data-role" => "tagsinput" %> 80 </div> 81 <div class="modal-footer"> 82 <%= f.submit "Ohuse sending", class: "btn btn-primary", data: { disable_with: "送信中..." } %> 83 </div> 84 <% end %> 85 </div> 86 </div> 87</div> 88

わかりづらくて申し訳ないのですが、

HTML

1 <button class="btn navbar-btn" data-toggle="modal" data-target="#createTicket"> 2 Create 3 </button>

の部分です。実際の画面は以下のようになります。
イメージ説明

このbuttonタグに他の自作のclassをつけてテキストカラーをつけたりしても変化はありませんでした。
他のオブジェクトに対して自作のclassで見た目を変化させたりはできたので、cssファイルがそもそも読み込まれていないということはないと思います。

解決策をご存知の方、よろしくお願いいたします…

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんな感じで効かないってことですか?

html

1<button class="btn navbar-btn test" data-toggle="modal" data-target="#createTicket"> 2 Create 3</button>

css

1.test { 2 color: #ff0000; 3}

上記で効かない場合は、さらに詳細度を高くしてみましょう。

css

1.navbar-nav .test { 2 color: #ff0000; 3}

投稿2016/10/11 13:10

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hisataka

2016/10/11 15:11

できました、ありがとうございます!! 詳細度で対応できるんですね、cssはまだまだ勉強不足なので頑張りたいと思います。改めてありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問