css - 为什么 bootstrap device-width 不使用我浏览器的整个宽度?

标签 css twitter-bootstrap width device-width

我正在尝试遵循 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>

在此先感谢您的帮助。

最佳答案

如果您使用的是最新的 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

关于css - 为什么 bootstrap device-width 不使用我浏览器的整个宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22003563/

相关文章:

java - Internet Explorer 无法在 IBM Websphere 上使用 Bootstrap 正确显示

javascript - 向旋转木马内部添加填充时 Bootstrap 旋转木马元素跳跃

html - Bootstrap 行中缺少填充

html td标签不考虑表格中的宽度

html - CSS a 标签没有排列

javascript - 使用 javascript 和 CSS 将一本书分页并将所有内容放在一页上

javascript - Django-Bootstrap4 Javascript、Jquery、CSS 无法正常工作

html - 覆盖方 block 中的中心文本没有不透明度

html - td 宽度,不起作用?

python - 根据 x 值的数量增加 matplotlib 中图形的宽度