Bootstrap navbar collapse funktioniert nicht auf mobilen Geräten
Wenn ich die Größe meines Browsers funktioniert Es tadellos, aber wenn ich es von meinem Handy/tablet lädt es die uncollapsed desktop-version, und falsch an.
Irgendwelche Probleme mit meinem html?
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="/">
<i class="fa fa-car"></i> <span class="light">Title</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Hier die relevanten Modelle sowie...
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
@media(max-width: $screen-xs-max) {
background-color: #000;
}
}
.navbar-custom .navbar-brand {
font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: darken(#fff, 20%);
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover {
outline: 0;
color: rgba(255,255,255,.8);
background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
outline: 0;
background-color: transparent;
}
.navbar-custom .nav li.active {
outline: 0;
}
.navbar-custom .nav li.active a {
background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li.active a:hover {
color: #fff;
}
@media(min-width:768px) {
.navbar-custom {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.navbar-custom.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: url('home/wood2.jpg') no-repeat center center fixed; }
}
Ich bin mit bootstrap-sass auf Schienen 4 wenn es überhaupt etwas bedeutet.
Dank!
- Das hat nichts mit Bezug zu ruby on rails
- Frage, ob es ein asset-pipeline-Problem. Youre Recht tho, ich nehme tag!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Noob Fehler.
Fehlte
in den head-Abschnitt der Anwendung.html-Code.erb.
:/
Bisher das einzige, was ich sehen konnte, falsch mit Ihrem code ist, dass Ihr button-Klasse fehlt die
navbar-toggle collapsed
Klasse auch ersetzen<i class="fa fa-car"></i> with <span class="sr-only">toggle navigation</span>
Andere Sache, sollten Sie überprüfen und sehen, ob css-Datei ist richtig verknüpft. Ihre
bootstrap.css
Datei sollte im Kopf derindex.html
- Datei.Platzieren Sie Ihre java-rechts vor dem schließenden
</body>
Die beste Lösung ist das Bearbeiten der navbar-Komponente aus dem getbootstrap website. [Hier ist mein pen][1]