Почему при загрузке устройства не используется вся ширина устройства в браузере?

Я пытаюсь следовать учебному пособию по Bootstrap, но первый созданный мной div, который должен охватывать всю ширину моего браузера / устройства, кажется, ограничен ~1000 пикселей. Есть идеи, почему это так?

Вот мой код:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing the Bootstrap 3.0 Grid System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    .col-xs-12 {
        height: 100px;
        background-color: blue;
        color:white;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="container">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>

</body>
</html>

Заранее благодарю за любую помощь.

Источник

2 ответа

Решение

Если вы используете последнюю версию 3.1, вы можете использовать container-fluid класс вместо container как это..

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>

3.1 полная ширина: http://www.bootply.com/116382

Для Bootstrap 3.0.x вам нужно использовать пользовательский контейнер, подобный этому...

.container-full {
  margin: 0 auto;
  width: 100%;
}

3.0 полная ширина: http://www.bootply.com/107715

Источник

Класс контейнера имеет ширину, указанную в зависимости от медиа-запроса. Ваш контент находится внутри этого div, поэтому его ширина основана на нем.

Вы можете увидеть это в инструментах разработчика во всех основных браузерах, найти этот элемент и просмотреть стили / свойства CSS.

Источник
Другие вопросы по тегам