为什么引导设备宽度不使用浏览器的整个宽度？答案

【问题标题】：Why isn't bootstrap device-width using the entire width of my browser?为什么引导设备宽度不使用浏览器的整个宽度？
【发布时间】：2014-03-27 01:09:39
【问题描述】：

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

提前感谢您的帮助。

【问题讨论】：

使用.container-fluid 而不是.container。

标签： css twitter-bootstrap width device-width

【解决方案1】：

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

【讨论】：

做到了（即容器流体），谢谢！限制容器类的宽度有什么意义？

【解决方案2】：

容器类具有根据媒体查询指定的宽度。您的内容在此 div 内，因此其宽度基于它。

您可以在所有主流浏览器的开发工具中看到这一点，找到该元素并查看 CSS 样式/属性。

【讨论】：