100%宽度的Twitter Bootstrap 3模板


134

我是一个Bootstrap新手,我有一个100%宽的模板,我想使用bootstrap进行编码。第一列从左上角开始,我在Google地图上将拉伸范围扩展到最右边。我以为可以在container-fluid课堂上做到这一点,但这似乎不再可用。我不知道如何使用bootstrap 3来实现该布局。我正在使用themeforest中的Geometry PSD模板,如果您想查看布局,请使用此处的链接:http ://themeforest.net/item/geometry-design-for- geolocation-social-networkr / 4752268


5
您可以自定义Bootstrap以将@container-*宽度用作100%。另外,.container-fluid在3.1.0中又回来了。:)

Answers:


247

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

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

是Bootply上的工作示例

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

Bootstrap 3.1的更新

container-fluid类中引导3.1已返回,所以这可以被用来创建一个完整的宽度的布局(没有额外的CSS需要)..

Bootstrap 3.1演示


13
你要小心点 该行的左右边距为-15px。这可以通过填充为15px的容器来补偿。最好的方法是将该填充添加到已满的容器中,然后使用行和列创建网格。
rootman

6
@rootman我正在使用class =“ container container-full”,这似乎正在工作。
Kenmore

将容器流体与col-md-12一起使用以获取完整尺寸的行。将有一个装订线(每侧标准15像素)需要移除。最简单的方法是使用以下自定义css手动将其删除:#SomeId div {padding-left:0; padding-right:0; }
马丁

2
感谢您的提示...容器流体对我来说效果很好,不需要其他更改。装订线没有出现问题,因为设置所包含类的背景颜色可以根据需要将颜色呈现到边缘,而文本和其他元素也可以根据需要稍微偏移一点。
克里希纳·古普塔2014年

30

这是完整的基本结构100%的宽度布局引导V3.0.0。你不应该<div class="row">container类来包装。原因container类将占用大量余量,并且不会为您提供全屏(100%宽度)布局,其中引导程序已从其移动优先版v3.0.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。在此处查看实时输出。http://bootply.com/82136完整的基本bootstrap 3 100%宽度布局我创建了要点。您可以使用它。从这里获取要点

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


20
由于.row的边距,此解决方案在FF中添加了水平滚动条。引导文档说,.row应该始终在容器内使用,因为-想要创建完全流畅布局的人(意味着您的站点会拉伸视口的整个宽度),必须将其网格内容包装在包含元素的内边距中:0 15px; 抵消边距:0 -15px; 用于.rows。- getbootstrap.com/css/#grid-intro
nealio82

5
Nealio是正确的。您仍应使用容器。我使用此CSS声明将全角行包装在.container-full中:.container-full { padding: 0 15px; }
tbeseda 2013年

3
这似乎是引导程序中的错误。我通过将以下内容添加到放置全屏行的容器元素中来解决此问题:padding:0 15px; 左边距:0px; 右边距:0px;
Jorre 2013年

2
并非所有内容都.row必须包含在内.container吗?
skube 2014年

2
Erik Flowers写了一篇关于容器/行关系的精彩文章,我建议阅读!
idleberg 2014年

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>

20

您使用正确,div.container-fluid并且还需要一个div.row孩子。然后,必须将内容放置在没有任何网格列的内部。如果您看一下文档,可以找到以下文本:

  • 必须将行放置在.container(固定宽度)或.container-fluid(全角)内,以便正确对齐和填充。
  • 使用行创建水平的列组。

如此处所述,不使用网格列也可以:

  • 内容放在列中,并且只有列可以是行的直接子代。

再看这个例子,您可以阅读以下文本:

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

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


5

在BOOTSTRAP 4中,您可以使用

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

...如果仅使用不带.m-0的.row作为顶层div,则将有多余的边距,这会使页面比浏览器窗口宽,并导致水平滚动条。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.