Вопрос
Я думаю о внедрении Bootstrap 3 в свой проект и тестирую некоторые его функциональные возможности и свойства, прежде чем переключаться на эту интерфейсную среду.
Странная вещь, которую я заметил, заключается в том, что жидкий контейнер Bootstrap на самом деле не занимает 100% ширины области просмотра (обратите внимание на линию в 1 пиксель справа от розового элемента Bootstrap):
Вот как выглядит мой HTML. Это в основном шаблон Bootstrap по умолчанию.
<!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>
Очевидно, я использую стандартную последнюю версию загрузочной версии CSS и свой собственный CSS:
.full-width {
width: 100%;
background-color: #808080;
}
.col-md-3 {
background-color: #4f4;
}
.col-md-9 {
background-color: #f4f;
}
Почему этот контейнер для жидкости не занимает 100% ширины? Хотя это всего лишь 1 пиксель, это определенно разрушит мой дизайн страницы.
Выпуск отдыха
Я создал jsfiddle по запросу относительно этой проблемы: http://jsfiddle.net/J6UE5
Чтобы воссоздать мою проблему, измените размер окна просмотра с помощью Safari (7.0.5) на Mac под управлением OS X 10.9.4. Вы заметите, что линия 1px на правой стороне розового контейнера появляется и исчезает при изменении размера. Как только зеленый и розовый контейнеры сложены (поведение Bootstrap), линия 1px исчезает, и все становится на 100% шириной.