0

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

提前感谢您的帮助。

4

2 回答 2

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

于 2014-02-25T02:51:57.360 回答
0

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

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

于 2014-02-25T02:47:08.967 回答