Obecnie badam wykorzystanie Twitter bootstrap jako podstawy dla moich przyszłych projektów rozwoju sieci dla klientów. Przeszedłem przez całą standardową dokumentację na ich stronie Github iz mojego zrozumienia, aby efektywnie wykorzystać układ siatki, twoje wiersze mogą zawierać tylko w sumie dwanaście kolumn (składających się z różnych elementów lub jednego elementu).Problemy z siatką bootstrap na Twitterze - Elementy powodujące przepełnienie kontenera podczas zmniejszania rozmiaru okna za pomocą responsywnego
Mając to na uwadze przeprowadziłem mały test z tekstem obejmującym 4 kolumny z rzędu wraz z odsunięciem div obejmującym 6 kolumn. Wydaje się, że to działa dobrze, jednak próbowałem dołączyć do jednego wiersza zawierającego div obejmujący 3 kolumny, które są przesunięte o 9 kolumn (nadal w sumie 12), aby sprawiać wrażenie, że zawartość w div jest wyświetlana bezpośrednio na stronie. Problem polega na tym, że wygląda to dobrze, gdy tryb okna jest dostosowany do pulpitu, jednak gdy zacznę skalować okno, zawartość elementu div jest wypychana z całego kontenera. Jeśli nadal przeskalowuję okno, elementy układają się tak, jak oczekuję w widoku mobilnym.
Moje pytanie brzmi, dlaczego to się zachowuje w ten sposób? Rozumiem, że dopóki istnieją 12 kolumn, zawartość pozostanie zamknięta w ich zewnętrznym kontenerze.
Mój kod można znaleźć poniżej. Istnieje wiele inline css, ale jest to tylko do celów testowych. To jest bootstrap zapasowy z wszystkimi opcjami sprawdzonymi na etapie dostosowywania, co oznacza, że uwzględnione są wszystkie opcje responsywne.
<!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>
Dzieje się to bez względu na to, czy używam układu płynów, czy nie. W płynnym przykładzie pole wyszukiwania pojawi się tak, jakby znikało z ekranu. W ustalonym przykładzie nałoży on szarą granicę kontenera.