Question

我正在尝试按照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>

提前感谢您的帮助。

Answer 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

Answer 2

容器类的宽度取决于媒体查询。您的内容在此div内，因此其宽度基于此。

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

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

2 个答案: