正文 

当前位置： 首页 > 知识 >

100% 宽度 Twitter Bootstrap 3 模板

     2023-03-05     43

关键词：

【中文标题】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，则会有多余的边距，这会使页面比浏览器窗口宽并导致水平滚动条。

【讨论】：

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

】如何在TwitterBootstrapAngularJS模态窗口中以100%宽度显示Flot图表【英文标题】：HowtoshowFlotchartin100%widthinTwitterBootstrapAngularJSmodalwindow【发布时间】：2012-10-0314:41:41【问题描述】：我正在使用TwitterBootstrapAngularJS构建一个网络应用程序... 查看详情

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

】TwitterBootstrap100%高度手风琴“跳跃”【英文标题】：TwitterBootstrap100%heightaccordion"jump"【发布时间】：2013-05-1422:08:30【问题描述】：我正在尝试使用TwitterBootstrap折叠组件实现100%高度的手风琴，正如question中所述。我正在手... 查看详情

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

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情

Twitter Bootstrap2 100% 高度响应

】TwitterBootstrap2100%高度响应【英文标题】：TwitterBootstrap2100%heightresponsive【发布时间】：2012-04-0620:36:23【问题描述】：我想用twitter的bootstrapv2制作一个响应式布局，带有一个列和一个地图。我们的想法是构建一个类似于maps.google.co... 查看详情

twitter-bootstrap 输入字段的最大宽度

】twitter-bootstrap输入字段的最大宽度【英文标题】：twitter-bootstrapmaxwidthofinputfield【发布时间】：2012-08-2015:25:11【问题描述】：我使用最新的twitter引导框架进行了以下设置：http://jsfiddle.net/hfexR/2/我现在希望输入字段在旁边没有按... 查看详情

Twitter bootstrap - 更改默认宽度

】Twitterbootstrap-更改默认宽度【英文标题】：Twitterbootstrap-changingdefaultwidth【发布时间】：2012-10-1901:28:59【问题描述】：我刚刚开始使用twitterbootstrap，想知道将默认宽度从940px更改为864px的最佳方法是什么。我尝试使用自定义页面... 查看详情

Bootstrap 3 流体容器不是 100% 宽度

】Bootstrap3流体容器不是100%宽度【英文标题】：Bootstrap3fluidcontainernot100%width【发布时间】：2014-09-1804:06:48【问题描述】：问题我正在考虑在我的项目中实现Bootstrap3，并在切换到这个前端框架之前测试它的一些功能和属性。我注意... 查看详情

Bootstrap 4 响应式表格不会占用 100% 的宽度

】Bootstrap4响应式表格不会占用100%的宽度【英文标题】：Bootstrap4responsivetableswon\'ttakeup100%width【发布时间】：2017-06-0411:58:30【问题描述】：我正在使用Bootstrap4构建一个Web应用程序并遇到了一些奇怪的问题。我想利用Bootstrap的表格... 查看详情

如何更改 Twitter Bootstrap 工具提示的宽度和高度？

】如何更改TwitterBootstrap工具提示的宽度和高度？【英文标题】：HowdoyouchangethewidthandheightofTwitterBootstrap\'stooltips?【发布时间】：2013-01-1320:09:57【问题描述】：我使用TwitterBootstrap创建了一个工具提示。工具提示显示为三行。但是，... 查看详情

Bootstrap 4 - 如何在导航栏中进行 100% 宽度的搜索输入？

】Bootstrap4-如何在导航栏中进行100%宽度的搜索输入？【英文标题】：Bootstrap4-howtomake100%widthsearchinputinNavbar?【发布时间】：2017-02-0814:36:38【问题描述】：如何使导航栏中的搜索输入宽度达到100%？字段宽度有限：<navclass="navbarnavba... 查看详情

Twitter Bootstrap 在 CSS 中使用星号宽度属性

】TwitterBootstrap在CSS中使用星号宽度属性【英文标题】：TwitterBootstrap\'suseofasteriskedwidthpropertiesinCSS【发布时间】：2013-02-0207:21:05【问题描述】：我一直在研究Bootstrap脚手架系统背后的CSS，我想知道为什么在下面的代码中需要使用... 查看详情

Twitter bootstrap 3：导航栏在词缀触发时改变宽度

】Twitterbootstrap3：导航栏在词缀触发时改变宽度【英文标题】：Twitterbootstrap3:Navbarchangeswidthwhenaffixfires【发布时间】：2014-07-1505:44:51【问题描述】：好吧，我有一个关于bootstrap-3附加脚本的奇怪问题。您可以在这个fiddle中看到问题... 查看详情

Twitter Bootstrap 3 增加 navbar-header div 宽度

】TwitterBootstrap3增加navbar-headerdiv宽度【英文标题】：TwitterBootstrap3increasingnavbar-headerdivwidth【发布时间】：2014-06-2418:07:38【问题描述】：这是我的代码：<navclass="navbarnavbar-defaultnavbar-fixed-top"role="navigation"><divclass="co 查看详情

Bootstrap 4：具有 100% 宽度（或自动）的下拉主按钮（输入组 + btn 组）

】Bootstrap4：具有100%宽度（或自动）的下拉主按钮（输入组+btn组）【英文标题】：Bootstrap4:Dropdownmainbutton(input-group+btn-group)with100%width(orauto)【发布时间】：2017-10-0915:57:54【问题描述】：输入组中的按钮宽度存在问题。我正在使用Bo... 查看详情

bootstrap 行 100% 宽度，没有水平滚动和自适应每个尺寸

】bootstrap行100%宽度，没有水平滚动和自适应每个尺寸【英文标题】：bootstraprow100%widthwithouthorizontalscrollandadaptiveoneachsize【发布时间】：2019-01-1302:37:21【问题描述】：大家好，我正在尝试添加一个容器，在该容器上我有一行和一列... 查看详情

Select2 with Twitter Bootstrap 3 / Dropdown 宽度错误

】Select2withTwitterBootstrap3/Dropdown宽度错误【英文标题】：Select2withTwitterBootstrap3/Dropdownwrongwidth【发布时间】：2014-02-2504:16:46【问题描述】：我想将select2.js与twitterbootstrap3结合使用。到目前为止一切正常，除了下拉容器与选择容器本... 查看详情

Twitter bootstrap3：HTML5，非跨域 iframe 缩放宽度和高度

】Twitterbootstrap3：HTML5，非跨域iframe缩放宽度和高度【英文标题】：Twitterbootstrap3:HTML5,non-cross-domainiframescalewidthandheight【发布时间】：2013-08-1920:10:56【问题描述】：我知道这已经被问过很多次了，但请继续阅读。在bootstrap3中，我... 查看详情

如何在 twitter bootstrap3 的导航栏中增加搜索栏的宽度

】如何在twitterbootstrap3的导航栏中增加搜索栏的宽度【英文标题】：Howtoincreasethewidthofsearchbarinthenavbarintwitterbootstrap3【发布时间】：2013-09-2912:49:25【问题描述】：我无法在twitterbootstrap3中增加导航栏搜索框的大小。我曾尝试将它们... 查看详情