135

我是一个引导程序新手，我有一个 100% 宽的模板，我想用引导程序编写代码。第一列从左角开始，我有一张谷歌地图，一直延伸到最右边。我以为我可以在container-fluid课堂上做到这一点，但这似乎不再可用。我不知道如何使用 bootstrap 3 实现该布局。我正在使用来自 themeforest 的 Geometry PSD 模板，如果您想查看布局，请点击此处的链接：http: //themeforest.net/item/geometry-design-for-地理位置-社交-网络/4752268

4

5 回答 5

247

对于 Bootstrap 3，您需要使用自定义包装器并将其宽度设置为 100%。

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

这是 Bootply 上的一个工作示例

如果您不想添加自定义类，则可以通过将所有内容包装在col-lg-12（宽布局演示）中来实现非常宽的布局（不是 100%）

Bootstrap 3.1 更新

该类container-fluid已在 Bootstrap 3.1 中返回，因此可用于创建全宽布局（无需额外的 CSS）。

引导程序 3.1 演示

于 2013-08-26T17:54:14.107 回答
30

这是Bootstrap v3.0.0中100% 宽度布局的完整基本结构。你不应该用类包装你的。因为类将占用大量边距，这不会为您提供全屏（100% 宽度）布局，其中引导程序已从其移动优先版本 v3.0.0中删除了容器流体类。<div class="row">containercontainer

因此，只需在没有容器类的情况下开始编写<div class="row">，您就可以使用 100% 宽度的布局了。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

为了自己查看结果，我创建了一个 bootply。查看那里的实时输出。http://bootply.com/82136我已经创建了一个完整的基本引导程序 3 100% 宽度布局。你可以使用它。从这里获取要点

如果您需要更多帮助，请回复我。谢谢。

于 2013-09-20T11:16:45.180 回答
27

使用Bootstrap 3.3.5 和.container-fluid，这就是我在移动设备上获得全宽而没有排水沟或水平滚动的方式。请注意，.container-fluid在 3.1 中重新引入。

手机/平板电脑全宽，桌面1/4屏幕

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

所有分辨率（移动设备、桌面、桌面）的全宽

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
于 2015-10-15T08:17:18.197 回答
20

你用对div.container-fluid了，你还需要一个div.row孩子。然后，内容必须放置在没有任何网格列的内部。如果您查看文档，您可以找到以下文本：

  • 行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
  • 使用行来创建水平的列组。

不使用网格列没关系，如此处所述：

  • 内容应该放在列中，并且只有列可以是行的直接子级。

看看这个例子，你可以读到这段文字：

全宽，单列：全宽元素不需要网格类。

这是一个实时示例，显示了一些使用正确布局的元素。这样您就不需要任何自定义 CSS 或 hack。

于 2014-02-13T11:01:21.830 回答
5

在 BOOTSTRAP 4 中，您可以使用

<div class="row m-0">
my fullwidth div
</div>

...如果您只使用没有 .m-0 的 .row 作为顶级 div，您将有多余的边距，这会使页面比浏览器窗口更宽并导致水平滚动条。

于 2019-04-27T05:56:36.490 回答