100% 宽度 Bootstrap 3模板

我是一个引导新手，我有一个100% 宽的模板，我想用引导编码。第一列从左边的角落开始，我有一个谷歌地图的延伸到最右边。我以为我可以做到这一点与 container-fluid类，但这似乎不再可用了。我不知道如何实现引导3的布局。我使用的几何 PSD 模板从主题森林，这里的链接，如果你想看到布局: http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

338523 次浏览
小开
最佳答案

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

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

这里 是 Bootply 上的一个工作示例

如果不喜欢添加自定义类，可以通过将所有内容包装在 col-lg-12(广泛的布局演示)中来实现非常宽的布局(不是100%)

Bootstrap 3.1的更新

container-fluid类已经在 Bootstrap 3.1中返回，所以这可以用来创建全宽布局(不需要额外的 CSS)。.

Bootstrap 3.1演示

小开

这是 Bootstrap v3.0.0中 100% 宽度布局的完整基本结构。你不应该用 container类包装你的 <div class="row">。因为 container类将采取大量的边缘，这将不会提供您全屏幕(100% 宽度)布局，其中引导程序已删除 容器-液体类从他们的移动第一版本3.0。

因此，只要开始编写没有容器类的 <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。看看那里的实时输出。和完整的基本引导带3100% 宽度布局我已经创建了一个主旨。你可以利用这一点。从 here中得到要点

如果您需要进一步的帮助，请回复我。谢谢。

小开

你使用 div.container-fluid是正确的，你也需要一个 div.row的孩子。然后，内容必须放在内部没有任何网格列。 如果你看过这些文档，你会发现下面这段文字:

  • 行 必须的放置在一个。容器(固定宽度)或。容器流体(全宽度)适当的对齐和填充。
  • 使用行创建水平列组。

不使用网格列也可以，如下所述:

  • 内容 应该放置在列中，只有列 梅是行的直接子行。

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

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

下面的 示例显示了使用正确布局的一些元素。这样你就不需要任何自定义的 CSS 或黑客。

小开

使用 鞋带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>
小开

在 BOOTSTRAP4中，您可以使用

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

... 如果你只是使用一个。没有。M-0作为顶级 div，您将有不必要的页边距，这将使页面比浏览器窗口宽，并导致水平滚动条。


提交答案