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

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

ただいまの
回答率

90.32%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,251

hisataka

score 17

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

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

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </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">
              <% if logged_in? %>
                <li><%= link_to "OHUSE", creators_path %></li>
                <li><%= link_to "fashioned", creators_fashion_path %></li>
                <button class="btn navbar-btn" data-toggle="modal" data-target="#createTicket">
                  Create
                </button>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Account <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><%= link_to "Profile", current_user %></li>
                    <% if current_user.admin %>
                      <li><%= link_to "Manage", kannri_path %></li>
                    <% end %>
                    <li class="divider"></li>
                    <li>
                      <%= link_to "logout", "/logout" %>
                    </li>
                  </ul>
                </li>



              <% else %>
                <li><%= link_to "Log in", '/auth/twitter' %></li>
              <% end %>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<nav class="navbar navbar-inverse" role="navigation">
</nav>



<div class="modal fade" id="createTicket" tabindex="-1" role="dialog" aria-labelledby="dialogHeader" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <%
        creator = Creator.new
      %>
      <%= form_for creator, :url => creators_path(creator), :class => "allow_submit" do |f| %>
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="dialogHeader">
        Let's create Ohuse!!
      </h4>
      </div>
      <div class="modal-body">
        <%= f.label :name %>
        <%= f.text_field :name, class: 'form-control' %>
        <%= f.label :description %>
        <%= f.text_area :description, class: 'form-control' %>
          <%= f.label :image %>
          <%= f.file_field :image, class: 'form-control' %>
          <%= f.hidden_field :imagevalue, :value => "test" %>
        <div class="p-tag">
        <%= f.label :tag %>
        ※Enterで区切ってください!
      </div>
        <%= text_field_tag 'creator[tag_list]', creator.tag_list.join(','), :class => 'form-control', "data-role" => "tagsinput" %>
      </div>
      <div class="modal-footer">
        <%= f.submit "Ohuse sending", class: "btn btn-primary", data: { disable_with: "送信中..." } %>
      </div>
      <% end %>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

<button class="btn navbar-btn test" data-toggle="modal" data-target="#createTicket">
  Create
</button>
.test {
    color: #ff0000;
}


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/12 00:11

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

    キャンセル

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

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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