Vấn đề
Tôi đang nghĩ về việc thực hiện Bootstrap 3 vào dự án của tôi và tôi đang thử nghiệm một số các chức năng và tính chất của nó trước khi chuyển sang khung front-end này.Bootstrap chứa 3 chất lỏng không phải là 100% chiều rộng
Điều lạ tôi nhận thấy là một container Bootstrap chất lỏng không thực sự trải rộng 100% chiều rộng khung nhìn (chú ý dòng 1px bên phải của phần tử hồng Bootstrap):
image http://i58.tinypic.com/29lzrwl.png
Đây là giao diện HTML của tôi. Về cơ bản nó là mẫu Bootstrap mặc định.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
<link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="full-width">This is not bootstrap</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
This is Bootstrap
</div>
<div class="col-md-9">
This is Bootstrap too
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Rõ ràng tôi sử dụng các tiêu chuẩn, phiên bản mới nhất của CSS bootstrap và CSS tùy chỉnh của riêng tôi:
.full-width {
width: 100%;
background-color: #808080;
}
.col-md-3 {
background-color: #4f4;
}
.col-md-9 {
background-color: #f4f;
}
Tại sao không phải là thùng chứa chất lỏng này kéo dài 100% chiều rộng? Mặc dù nó chỉ là 1px nó chắc chắn sẽ phá vỡ thiết kế trang của tôi.
Issue giải trí
Tôi tạo ra một jsfiddle theo yêu cầu liên quan đến vấn đề này: http://jsfiddle.net/J6UE5
Để tái tạo vấn đề của tôi thay đổi kích thước khung nhìn sử dụng Safari (7.0.5) trên máy Mac chạy OS X 10.9.4. Bạn sẽ thấy dòng 1px ở bên phải của vùng chứa màu hồng xuất hiện và biến mất trong khi thay đổi kích thước. Khi container màu xanh lá cây và màu hồng được xếp chồng lên nhau (hành vi Bootstrap), dòng 1px biến mất và mọi thứ đều rộng 100%.
bạn có thể ghi đè đệm CSS container? – ahnbizcad