Attualmente sto studiando l'utilizzo del bootstrap di Twitter come base per i miei futuri progetti di sviluppo web per i clienti. Ho consultato tutta la documentazione standard sulla loro pagina Github e, dal mio punto di vista, per utilizzare efficacemente il layout della griglia, le tue righe devono contenere solo un totale di dodici colonne (composte da diversi elementi o un singolo elemento).Problemi di rete di bootstrap su Twitter - Contenitore di overflow di articoli quando si ridimensiona la dimensione della finestra utilizzando responsive
Con questo in mente ho condotto un piccolo test con un testo che si estende su 4 colonne in fila insieme a un div offset che si estende su 6 colonne. Questo sembra funzionare bene tuttavia, ho quindi provato ad includere una singola riga contenuta in una div che si estende su 3 colonne che è sfalsata di 9 colonne (ancora per un totale di 12) per dare l'impressione che il contenuto all'interno del div sia flottato proprio sulla pagina. Il problema è che questo sembra corretto quando la modalità finestra è adatta a un desktop, tuttavia quando inizio a ridimensionare la finestra, il contenuto del div viene eliminato dal contenitore generale. Se continuo a ridimensionare la finestra, gli elementi si impilano come mi aspetto per la visualizzazione mobile.
La mia domanda è, perché questo si comporta in questo modo? La mia comprensione era che finché c'erano 12 colonne il contenuto sarebbe rimasto racchiuso nel loro contenitore esterno.
Il mio codice può essere trovato sotto. C'è un sacco di css in linea, ma questo è solo a scopo di test. Questo è il bootstrap di serie con tutte le opzioni selezionate nella fase di personalizzazione, il che significa che sono incluse tutte le opzioni di risposta.
<!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>
Si verifica se utilizzo il layout del fluido o meno. Nell'esempio fluido, la casella di ricerca apparirà come se fosse fuori dallo schermo. Nell'esempio fisso si sovrapporrà al bordo grigio del contenitore.
