More than 3 years have passed since last update.

【Rails】Bootstrapのtext-lightをlink_toメソッドに継承できないのは、メソッドに引数としてクラスを書いていないのが原因らしい

Posted at 2020-11-14

##はじめに
BootstrapをRails環境に導入し、きれいにしていくぞ～って思ったらいきなり躓いたので共有します。

##事象
どうしてもlink_toメソッドの要素に継承されない

###HTMLで記載したときはテキストに白色が適用されている

index.html

<body> 
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> 
    <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"><a class="nav-link" href="">tweetApp</a></li> 
    </ul> 
  </nav>

###なぜかlink_toに置き換えると継承されない
navbar-darkクラスを設定してるので、文字色が白になるはずだが、青になっている。

index.erb

<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> 
    <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
        <a class="nav-link" href=""> 
          <%= link_to('tweetApp',"/") %> 
        </a> 
      </li> 
    </ul> 
  </nav>

##DevtoolでCSSを生成されたHTMLを見ると、、、
生成されたリンクがaタグから飛び出てる、、、

index.erb

<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> 
    <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
        <a class="nav-link" href=""></a> 
        <a href="/">tweetApp</a> 
      </li> 
    </ul> 
  </nav>

##link_toメソッドにはクラスを指定するオプションが存在する模様

書式　link_to(リンクテキスト, パス [, オプション, HTML属性 or イベント属性])
classオプション　class: "クラス名"
参考　Railsドキュメント-ビューについて

##書式に従って記載してみる

index.erb

<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> 
    <%= link_to("TweetApp","/",class: 'text-light')%> 
  </nav>

##結果、、、できた。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up