CSS für Navbar funktioniert nicht

Ich habe eine Anwendung auf Ruby auf Schienen mit einer Navbar - der Teil mit der Marke und Projektname kann durch mein Stylesheet geändert werden, aber für den Navbar-rechten Teil. Ich habe so viele Referenzen probiert: .navbar-rightnav navbar-nav ul li a und alle Teile davon und alle Kombinationen davon und .active und ohne. und nur ul, ich kann einfach nicht finden, welche Klasse oder ID ich verwenden muss, um meine Stile auf der rechten Seite arbeiten zu lassen.CSS für Navbar funktioniert nicht

Hier ist mein 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>

und meine 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; 
}

Quelle

2017-06-19 Julin

Sie haben vergessen, die js  <script src="js/bootstrap.min.js"></script> unter dem

Quelle

2017-06-19 16:23:14 mlegg

1.. Sie haben jQuery nicht. jQuery wird für Bootstrap benötigt (es sei denn, Sie verwenden nur ihr Stil wie Grid-System).

hinzufügen jQuery:

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

2.. Ich schlage vor, ID anstelle von Klasse für Ihr Navbar-Ziel data-target="#my-navbar" zu verwenden.

3.. Ziel der <a> (das ist, wo der Inhalt gewesen halten) hinzuzufügen Stil wie:

#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>

Quelle

2017-06-19 16:39:21

Thank you so much! Ja, ich dachte irgendwie, dass Jquery in einer der anderen Dateien ist ... Ruby on Rails ist mir immer noch sehr unbekannt. – Julin

Willkommen zu stackOverflow @Julin, Wenn die Antwort ist, was Sie suchen, markieren Sie es als [Richtige Antwort] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) für die zukünftigen Leser. Vielen Dank! –

CSS für Navbar funktioniert nicht

Antwort

Verwandte Themen