100% 宽度 Twitter Bootstrap 3 模板

Posted 2023-03-05

技术标签:

【中文标题】100% 宽度 Twitter Bootstrap 3 模板【英文标题】：100% width Twitter Bootstrap 3 template 【发布时间】：2013-08-29 06:49:50 【问题描述】：

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

【问题讨论】：

您可以自定义 Bootstrap 以使用 @container-* 宽度为 100%。此外，.container-fluid 将在 3.1.0 中回归。 :) 【参考方案1】：

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

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

Here 是 Bootply 上的一个工作示例

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

Bootstrap 3.1 更新

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

Bootstrap 3.1 demo

【讨论】：

你需要小心。该行的左右边距为 -15px。这是由具有 15px 填充的容器补偿的。最好的方法是将填充添加到您的容器中，然后使用行和列来制作您的网格。 @rootman 我正在使用 class="container container-full"，这似乎可以正常工作。使用 container-fluid 和 col-md-12 来获得完整大小的行。将有一个排水沟（每侧标准 15 像素）需要移除。最简单的方法是使用以下自定义 css 手动删除它：#SomeId div padding-left:0;填充权：0；感谢您的提示... container-fluid 对我来说效果很好，无需进行其他更改。装订线没有出现问题，因为设置包含的类的背景颜色会根据需要将颜色呈现到边缘，而文本和其他元素也可以根据需要稍微偏移。【参考方案2】：

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

所以只要开始写<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% 宽度布局我已经创建了一个要点。你可以使用它。从here获取要点

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

【讨论】：

此解决方案在 FF 中添加水平滚动条，因为 .row 上有边距。 bootstrap 文档说 .row 应该始终在容器内使用，因此 - 希望创建完全流畅的布局（意味着您的网站拉伸视口的整个宽度）的人们必须将其网格内容包装在具有填充的包含元素中：0 15像素；偏移边距：0 -15px；用于.rows。 - getbootstrap.com/css/#grid-intro Nealio 是正确的。您仍然应该使用容器。我使用以下 CSS 声明将全角行包装在 .container-full 中：.container-full padding: 0 15px; 这似乎是引导程序中的错误。我通过将以下内容添加到放置全屏行的容器元素来解决它： padding: 0 15px;左边距：0px；右边距：0px; 不是所有.rows 都需要包含在.container 中吗？ Erik Flowers 写了一篇很棒的 article 关于容器/行的关系，我推荐阅读它！【参考方案3】：

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

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

不使用网格列也没关系，如下所述：

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

查看this 示例，您可以阅读以下文字：

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

Here's 一个活生生的例子，展示了一些使用正确布局的元素。这样您就不需要任何自定义 CSS 或 hack。

【讨论】：

【参考方案4】：

使用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>

【讨论】：

【参考方案5】：

在 BOOTSTRAP 4 中你可以使用

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

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

【讨论】：

以上是关于100% 宽度 Twitter Bootstrap 3 模板的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

Twitter Bootstrap 3：右对齐折叠导航问题

Twitter Bootstrap2 100% 高度响应

Twitter Bootstrap 100% 高度手风琴“跳跃”

Twitter bootstrap - 更改默认宽度