Navbar的CSS不起作用

我有一個應用程序在導航欄上的紅寶石 - 品牌和項目名稱的部分可以通過我的樣式表來更改，但導航欄的右側部分。我嘗試瞭如此多的參考文獻：.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

你忘了JS  <script src="js/bootstrap.min.js"></script>下

來源

2017-06-19 16:23:14 mlegg

。你沒有jQuery。 引導程序需要jQuery（除非您只是使用它們的網格系統樣式）。

加入jQuery的：

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

第二。我建議使用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是在其他文件之一...軌道上的紅寶石仍然是我不熟悉的。 – Julin

歡迎來到StackOverflow @Julin，如果答案是你要找的標記爲[正確答案]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）for未來的讀者。謝謝！ –

Navbar的CSS不起作用

回答

相關問題