Twitter bootstrap grille de questions - Éléments de débordement du récipient lors de réduire la taille de la fenêtre à l'aide de réactifs

Je suis en train d'enquêter sur l'utilisation de Twitter bootstrap comme une fondation pour mes futurs projets de développement web pour les clients. J'ai été par le biais de l'ensemble de la documentation standard sur leur Github page et de ma compréhension, l'utilisation de la grille de mise en page efficace, vos lignes ne doivent contenir un total de douze colonnes (composé d'éléments différents ou un seul élément).

C'est dans cet esprit que j'ai effectué un petit test avec un peu de texte sur 4 colonnes dans une rangée le long avec un décalage div étendant sur 6 colonnes. Cela semble bien fonctionner, cependant, j'ai ensuite essayé d'inclure une ligne unique contenu d'une div sur 3 colonnes qui est compensée par 9 colonnes (encore totalisant 12) pour donner l'impression que le contenu de la div est flottant à droite sur la page. Le problème est que cela s'affiche bien lorsque la fenêtre de mode est adapté à un bureau cependant que je commence à l'échelle de la fenêtre, le contenu de la div sont poussés hors de l'ensemble du conteneur. Si je continue à l'échelle en bas de la fenêtre, les éléments de la pile que j'attends pour l'affichage mobile.

Ma question est, pourquoi est-ce se comporter de cette façon? Ma compréhension était que tant qu'il y avait 12 colonnes, le contenu resterait enfermé à l'intérieur de leur conteneur externe.

Mon code peut être trouvé ci-dessous. Il y a beaucoup de css, mais c'est juste pour des fins de test. C'est une action de bootstrap avec toutes les options cochées à la personnalisation du stade, ce qui signifie que tous les réactifs sont fournis.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<!--BOOTSTRAP-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid" style="border: 1px solid #cccccc">
<div class="row-fluid">
<div class="span4">This is a div spanning 4 columns</div>
<div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div>
</div>
<div class="row-fluid">
<div class="span3 offset9">
<form class="form-search">
<div class="row-fluid">
<div class="input-append span2">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button>
</div>
</div>
</form>
</div>
</div>  
</div>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

Cela se produit si j'utilise le fluide de mise en page ou pas. Dans le fluide à l'exemple de la "searchbox" apparaîtra comme s'il allait sortir de l'écran. Dans le fixe, exemple on va superposer la bordure grise du conteneur.

InformationsquelleAutor jezzipin | 2013-07-03