Le site My Rails 4 avec la dernière version de bootstrap ne s'effondrera pas dans mobile, mais si j'ouvre le site sur le bureau et que je réduis la fenêtre, il s'effondrera. Voici le code pour ma barre de navigation:
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<a href = "/" class = "navbar-brand" style="color: white;">Earn And Learn</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li id="nav_ach"><a href = "/about/achievements" style="color: white;">Achievements</a></li>
<li id="nav_faq"><a href = "/about/faq" style="color: white;">FAQ</a></li>
<li id="nav_test"><a href = "/about/testimonials" style="color: white;">Testimonials</a></li>
<li id="nav_news"><a href = "/about/news" style="color: white;">In the News</a></li>
<li id="nav_steal"><a href = "/steal/index" style=" color: white;">Steal This Idea!</a></li>
<li><a href = "#" data-toggle="modal" data-target="#myModal" style="color: white;">Contact Us</a></li>
</ul>
</div>
</div>
</div>
Creusez à travers les problèmes de github et il s'avère que nous manquons cette
<meta name="viewport" content="width=device-width, initial-scale=1.0">
il manque l'identifiant de collapse
ce doit être
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<a href = "/" class = "navbar-brand" style="color: white;">
Earn And Learn
</a>
<button class="navbar-toggle" data-toggle="collapse"
data-target= ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li id="nav_ach"><a href="/about/achievements"
style="color: white;">Achievements</a></li>
<li id="nav_faq"><a href="/about/faq"
style="color: white;">FAQ</a></li>
<li id="nav_test"><a href = "/about/testimonials"
style="color: white;">Testimonials</a></li>
<li id="nav_news"><a href = "/about/news" style="color: white;">
In the News</a></li>
<li id="nav_steal"><a href = "/steal/index"
style="color: white;">Steal This Idea!</a></li>
<li><a href = "#" data-toggle="modal" data-target="#myModal"
style="color: white;">Contact Us</a></li>
</ul>
</div>
</div>
</div>
Ce n'est pas bootstrap3 standard. Regardez la page des exemples pour connaître le syteax de bootstrap . Au niveau de bootstrap3, il existe d’autres classes importantes pour le réduire . Regardez les exemples ou sur ma page pour apprendre le code de base.
Vous pouvez utiliser une balise meta pour fournir la largeur d'écran de l'appareil
<meta name="viewport" content="width=device-width">