2014-06-26 7 views
0

je suit dans ma tête ...Bootstrap 3 système de grille - n'apparaît pas comme grille - quel fichier ai-je manqué?

<!-- Mobile viewport optimized --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<!-- Bootstrap CSS --> 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet"> 
<!-- Custom CSS --> 
<link href="includes/css/styles.css" rel="stylesheet"> 
<!-- Include Modernizr in the head, before any other Javascript --> 
<script src="includes/js/modernizr-2.6.2.min.js"></script> 

... et ce qui suit sur ma page ...

<div class="container">  
<div class="row"> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
</div> 
</div> 

... mais la mise en page de la grille n'apparaît pas. Au contraire, il est juste une colonne empilés verticalement de texte comme ceci:

.col-md-1

.col-md-1

.col-md-1

.col-md -1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-MD-1

Ai-je manqué quelque chose dans la section de tête? Je m'attendais à voir 12 colonnes. Appréciez l'aide, merci. NJ

+1

votre code fonctionne. Je suggère fortement que vous avez manqué un css ou inclus une ancienne version de bootastrap. S'il vous plaît inclure le code approprié dans la tête – nozzleman

+0

On dirait que j'avais une ancienne version de bootstrap.min.css bien que je suivais un tutoriel Bootstrap 3 (www.youtube.com/watch?v=MNp5I_vO8IU). Le système de grille fonctionne maintenant, mais le nouveau fichier bootstrap.min.css a complètement détruit ma barre de navigation. Je vais fournir des détails ci-dessous. Je vous remercie. – NathonJones

Répondre

0

vous manquez le jQuery et Bootstrap Javascript dans la page <head>

+1

Que devraient être ces références? En vérifiant l'exemple http://getbootstrap.com/examples/grid/, il ne fait pas référence à JavaScript jQuery ou Bootstrap dans la page? Appréciez l'aide, merci Khalid. – NathonJones

+0

Vous savez, vous avez raison. Je ne savais pas que vous pouvez utiliser le système de grille de Bootstrap sans le Javascript :) Vérifiez mon autre réponse –

0

Essayez de changer .col-md-1-.col-xs-1

+0

cela ne ferait que changer le comportement pour les appareils avec une largeur comprise entre 768 et 992 px. son code fonctionne si css est chargé correctement – nozzleman

Questions connexes