Tôi hiện đang điều tra việc sử dụng bootstrap Twitter làm nền tảng cho các dự án phát triển web trong tương lai cho khách hàng. Tôi đã trải qua tất cả tài liệu chuẩn trên trang Github của họ và từ sự hiểu biết của tôi, để sử dụng bố cục lưới một cách hiệu quả, các hàng của bạn chỉ được chứa tổng cộng mười hai cột (được tạo thành từ các phần tử khác nhau hoặc một phần tử).Các vấn đề về lưới khởi động Twitter - Các mục chứa tràn khi giảm kích thước cửa sổ bằng cách sử dụng đáp ứng
Với điều này trong tâm trí tôi đã tiến hành một thử nghiệm nhỏ với một số văn bản kéo dài 4 cột trong một hàng cùng với một div bù đắp kéo dài 6 cột. Điều này dường như làm việc tốt tuy nhiên, tôi đã cố gắng để bao gồm một hàng duy nhất chứa một div spanning 3 cột được bù đắp bởi 9 cột (vẫn còn tổng cộng 12) để cho ấn tượng rằng nội dung trong div được thả ngay trên trang. Vấn đề là điều này xuất hiện tốt khi chế độ cửa sổ là phù hợp với một máy tính để bàn tuy nhiên khi tôi bắt đầu quy mô cửa sổ, các nội dung của div được đẩy ra khỏi container tổng thể. Nếu tôi tiếp tục mở rộng cửa sổ xuống, các phần tử chồng như tôi mong đợi cho chế độ xem di động.
Câu hỏi của tôi là, tại sao điều này hoạt động theo cách này? Sự hiểu biết của tôi là miễn là có 12 cột nội dung sẽ vẫn được bao bọc trong vùng chứa bên ngoài của họ.
Mã của tôi có thể được tìm thấy bên dưới. Có rất nhiều css nội tuyến nhưng điều này chỉ dành cho mục đích thử nghiệm. Đây là bootstrap cổ phiếu với tất cả các tùy chọn được kiểm tra ở giai đoạn tùy biến có nghĩa là tất cả các tùy chọn đáp ứng được bao gồm.
<!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>
Điều này xảy ra cho dù tôi có sử dụng bố cục lỏng hay không. Trong ví dụ về chất lỏng, hộp tìm kiếm sẽ xuất hiện như thể nó đang tắt màn hình. Trong ví dụ cố định, nó sẽ phủ lên đường viền màu xám của vùng chứa.
