NavbarのCSSが動作しません

Ruby on Navbarでアプリケーションを使用しています。ブランド名とプロジェクト名の部分はスタイルシートで変更できますが、navbar-right部分で変更することができます。私は非常に多くの参照を試みた：.navbar-rightnav navbar-nav ul li aとそれのすべての部分とそれらのすべての組み合わせと.activeとなし。ちょうどul、私はちょうど私のスタイルを右の部分で動作させるために使用する必要がクラスまたはIDを見つけることができません。ここでNavbarのCSSが動作しません

は私のhtmlです：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Julinsecommerce</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <%= csrf_meta_tags %> 
    </head> 

    <body> 

    <!--navbar starts here--> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button>   
      <div class="projectName navbar-brand"> 
      <a href="./index">ДЖУЛИН</a> 
      </div> <!--end projectName -->   
     </div> <!--end navbar-header -->   
     <div class="navbar-collapse collapse"> 

      <ul class="navbar-right nav navbar-nav"> 
      <li class="active"> <a href="#home"> Home </a> </li> 
      <li class="active"> <a href="#about"> About </a></li> 
      <li class="active"> <a href="#contact">Contact </a></li> 
      </ul> 
     </div> 
     </div> <!-- end nav container--> 
    </nav> 

    <%= yield %> 

    <footer> 
     &copy; 2017 Julin 
     <p> <span class="glyphicon glyphicon-arrow-up"></span> 
     <a href=#> Back to top </a> 
    </footer> 

    </body> 

</html>

と私のCSS：

// Place all the styles related to the static_pages controller here. 
// They will automatically be included in application.css. 
// You can use Sass (SCSS) here: http://sass-lang.com/ 

html, 
body { 
    height: 100%; 
} 

body { 
    position: relative; 
    padding-top: 60px; 
} 

/***navbar***/ 

.navbar { 
    background-color: #28c093; 
    height: 5em; 
} 

.navbar-collapse collapse .navbar-right ul li a { 
    color: #3234cd; 
    background-color: #fff; 
    letter-spacing: 0.05em; 
    } 

.navbar-nav li a:hover { 
     color: #ff0; 
    } 

.projectName a { 
    color: #3234cd; 
    letter-spacing: 0.05em; 
    padding-top: 1.1em; 
    font-family: Helvetica,Arial,Georgia,serif; 
    font-weight: bold; 
} 

.projectName a:hover { 
    color: #1d5fd7; 
} 

/***h1***/ 
h1 { 
    font-family: Helvetica,Arial,Georgia,serif; 
    font-weight: bold; 
    color: #3234cd; 
    text-align: center; 
} 

.img-responsive hoian { 
    display: inline-block; 
    float: center; 
    width: 60%; 
    padding: 2em; 
    border: red; 
} 

body > .container { 
    padding: 60px 15px 0; 
} 

/***footer***/ 
footer { 
    padding-top: 1em; 
    font-family: Helvetica,Arial,Georgia,serif; 
    color: #3234cd; 
}

出典

2017-06-19 Julin

あなたは

出典

2017-06-19 16:23:14 mlegg

第一下のjsに <script src="js/bootstrap.min.js"></script>を忘れてしまいました。あなたはjQueryを持っていません。 ブートストラップにjQueryが必要です（グリッドシステムのようなスタイルを使用していない限り）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

第二：

はjQueryのを追加します。あなたのnavbarターゲットの代わりにidを使用することをお勧めしますdata-target="#my-navbar"。

第3の。ターゲット<a>のようなスタイルを追加する（コンテンツとなってホールドがどこそれはです）：

#my-navbar a { 
    background: aqua; 
}

// Place all the styles related to the static_pages controller here. 
 
// They will automatically be included in application.css. 
 
// You can use Sass (SCSS) here: http://sass-lang.com/ 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    padding-top: 60px; 
 
} 
 

 

 
/***navbar***/ 
 

 
.navbar { 
 
    background-color: #28c093; 
 
    height: 5em; 
 
} 
 

 
.navbar-collapse collapse .navbar-right ul li a { 
 
    color: #3234cd; 
 
    background-color: #fff; 
 
    letter-spacing: 0.05em; 
 
} 
 

 
.navbar-nav li a:hover { 
 
    color: #ff0; 
 
} 
 

 
.projectName a { 
 
    color: #3234cd; 
 
    letter-spacing: 0.05em; 
 
    padding-top: 1.1em; 
 
    font-family: Helvetica, Arial, Georgia, serif; 
 
    font-weight: bold; 
 
} 
 

 
.projectName a:hover { 
 
    color: #1d5fd7; 
 
} 
 

 

 
/***h1***/ 
 

 
h1 { 
 
    font-family: Helvetica, Arial, Georgia, serif; 
 
    font-weight: bold; 
 
    color: #3234cd; 
 
    text-align: center; 
 
} 
 

 
.img-responsive hoian { 
 
    display: inline-block; 
 
    float: center; 
 
    width: 60%; 
 
    padding: 2em; 
 
    border: red; 
 
} 
 

 
body>.container { 
 
    padding: 60px 15px 0; 
 
} 
 

 
#my-navbar a { 
 
    background: aqua; 
 
} 
 

 
/***footer***/ 
 

 
footer { 
 
    padding-top: 1em; 
 
    font-family: Helvetica, Arial, Georgia, serif; 
 
    color: #3234cd; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Julinsecommerce</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
 

 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <%= csrf_meta_tags %> 
 
</head> 
 

 
<body> 
 

 
    <!--navbar starts here--> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     <div class="projectName navbar-brand"> 
 
      <a href="./index">ДЖУЛИН</a> 
 
     </div> 
 
     <!--end projectName --> 
 
     </div> 
 
     <!--end navbar-header --> 
 
     <div class="navbar-collapse collapse" id="my-navbar"> 
 

 
     <ul class="navbar-right nav navbar-nav"> 
 
      <li class="active"> <a href="#home"> Home </a> </li> 
 
      <li class="active"> <a href="#about"> About </a></li> 
 
      <li class="active"> <a href="#contact">Contact </a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <!-- end nav container--> 
 
    </nav> 
 

 
    <%= yield %> 
 

 
    <footer> 
 
     &copy; 2017 Julin 
 
     <p> <span class="glyphicon glyphicon-arrow-up"></span> 
 
     <a href=#> Back to top </a> 
 
    </footer> 
 

 
</body> 
 

 
</html>

出典

2017-06-19 16:39:21

はどうもありがとうございました！はい、私は何とかjqueryが他のファイルの1つにあると思っていました...レール上のルビーはまだ私にはほとんど知られていません。 – Julin

@JulinのstackOverflowへようこそ。答えが「正解」（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）として将来の読者。ありがとうございました！ –

NavbarのCSSが動作しません

答えて

関連する問題