bootstrap :row、container、container-fluid

最新推荐文章于 2022-07-02 14:18:11 发布
转载 最新推荐文章于 2022-07-02 14:18:11 发布 · 432 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/fuxiao82/p/4963404.html

本文探讨了在使用Bootstrap框架时遇到的一个常见问题：当仅使用row类进行布局时，页面宽度超过100%导致出现滚动条。文章分析了问题的原因，并通过对比不同容器类（如container和container-fluid）的效果来解决问题。

在使用bootstrap的过程中发现单独使用row类布局时，整个页面宽度总是大于100%，导致浏览器出现滚动条，这是大多数情况不想看到的效果，而且半天找不出原因，如果习惯写完整个页面结构才检查bug的“坏习惯”


之后发现

控件或者container控件下面，则不会出现滚动条


为此， 查看了bootstrap对row 和 container-fluid、container 的栅栏系统的解释





转载于:https://www.cnblogs.com/fuxiao82/p/4963404.html

bootstrap5-学习笔记1-容器+布局+按钮+工具
陆沙的博客
06-02 1228
bs5
html+css样式：图片切换-----立体旋转
renjingzhaozhao的博客
04-14 1293
html如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="view...
Bootstrap---Fluid layout 流布局
网站开发初中级代码参考-转载
04-23 325
流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕（手机，PAD…）。 &lt;div class="container-fluid"&gt; &lt;div class="row-fluid"&gt; &lt;div class="span2"&gt; &lt;/div&amp
margin值为负数——bootstrap row container-fluid样式学习
黄彪博客
09-07 1491
1、在使用bootstrap的过程中发现只要是使用row这个class，则div每次都是都是超过100%,出现滚动条   2、如果是在控件下面，则不会出现滚动条   查看了row 和 container-fluid的class样式说明   //让div控件显示为100%，然后外边距左右各添加15px，实际上是给div增加30px .row { margin-left: -1
BSP:Bootstrap基本布局（container, row, col-xs-4）
weixin_30367873的博客
05-05 1299
class: container, container-fluid,row, col-xs-1, col-sm-1,col-md-1, col-lg-1 col-md-offset-1 col-md-push-1 col-md-pull-1 12列格网布局:最多分为12列，随着屏幕设备或视口尺寸变化 格网布局由行（row）和列（column）构成。 用户将内容填充到格网布局的...
Atitit bootsAtitit bootstrap布局 栅格.docx 目录 1. 简述container与container-fluid的区别 1 1.1.1. 在bootstrap中的布局
attilax的专栏
01-01 353
Atitit bootsAtitit bootstrap布局 栅格.docx 目录 1. 简述container与container-fluid的区别 1 1.1.1. 在bootstrap中的布局容器一栏中，提供了container与container-fluid两种容器，其官方解释为： 1 1.1.2. 所以，先说一说它们的共同点：这两种容器的高度设定都是一致的，都为auto。而...
Flutter入门之Row、Column、Container布局
shaoduo的博客
05-12 872
写过Android的都知道Android中有个很常用布局LinearLayout，它可以实现线性的横向或纵向的布局结构。对于学习Flutter的Android开发者来说，肯定也想知道Flutter中该如何实现线性布局结构。 在Flutter中线性布局结构的实现是通过两个不同的widget分别来实现横向和纵向布局结构的。组件Row用来实现横向的线性布局，而组件Column则用来实现纵向的线性布局，而Container则是用来设置背景、设置大小、设置边距(padding)的布局。 Container .
grid-curso-bootstrap:Bootstrap课程中使用的示例网格
05-18
9. ** Fluid containers**：Bootstrap的默认容器（container）有固定宽度，但`.container-fluid`类创建了一个全宽容器，适用于需要跨越整个视口的布局。 通过学习和实践这个“grid-curso-bootstrap”项目，开发者...
# 系统前端架构图 ```mermaid graph TD A[前端架构] --> B[技术栈] A --> C[页面结构] A --> D[响应式设计] A --> E[组件化开发] B --> B1[HTML5] B --> B2[CSS3] B --> B3[JavaScript] B --> B4[Bootstrap框架] C --> C1[布局模板] C --> C2[业务模块] C --> C3[公共组件] C1 --> C1a[layout.html] C2 --> C2a[考勤管理] C2 --> C2b[部门管理] C2 --> C2c[员工管理] C2 --> C2d[薪资管理] C3 --> C3a[导航栏] C3 --> C3b[侧边栏] C3 --> C3c[页脚] D --> D1[移动端适配] D --> D2[平板适配] D --> D3[桌面端适配] E --> E1[UI组件] E --> E2[业务组件] E --> E3[工具组件] E1 --> E1a[Bootstrap组件] E1 --> E1b[自定义组件] E2 --> E2a[表单组件] E2 --> E2b[列表组件] E2 --> E2c[图表组件] E3 --> E3a[工具函数] E3 --> E3b[API封装] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#333,stroke-width:2px style C fill:#bfb,stroke:#333,stroke-width:2px style D fill:#fbb,stroke:#333,stroke-width:2px style E fill:#fbf,stroke:#333,stroke-width:2px ``` ## 架构说明 ### 1. 技术栈 - **HTML5**：页面结构 - **CSS3**：样式和动画 - **JavaScript**：交互逻辑 - **Bootstrap框架**：响应式布局和UI组件 ### 2. 页面结构 - **布局模板**：基于`layout.html`的统一布局 - **业务模块**： - 考勤管理 - 部门管理 - 员工管理 - 薪资管理 - **公共组件**：导航栏、侧边栏、页脚等 ### 3. 响应式设计 - **移动端适配**：针对手机屏幕优化 - **平板适配**：针对平板设备优化 - **桌面端适配**：针对大屏设备优化 ### 4. 组件化开发 - **UI组件**： - Bootstrap组件库 - 自定义组件 - **业务组件**： - 表单组件 - 列表组件 - 图表组件 - **工具组件**： - 工具函数 - API封装 ## 技术特点 1. 采用Bootstrap框架实现响应式布局 2. 组件化开发，提高代码复用性 3. 多端适配，确保良好的用户体验 4. 模块化设计，便于维护和扩展 5. 统一的UI风格和交互规范
最新发布
05-14
<div class="container-fluid"> <a class="navbar-brand" href="#">系统LOGO <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav...
bootstrap-3.3.5 bootstrap-3.3.5-dist WEB 前端开发 CSS框架
10-04
5. **网格选项**：Bootstrap 3.3.5提供了多种网格选项，如`.container`、`.container-fluid`、`.col-*-*`等，用于控制内容的容器和列宽，帮助开发者创建不同宽度的布局。 6. **可定制化**：Bootstrap允许用户根据...
bootstrap栅格系统的container和row一些关系
极客神殿
06-29 1222
container有个15px的padding，而我们设定的每个col也都有15px的padding，如果两者直接配合，那么就会产生30px的间距，导致内容和浏览器边框的距离较大，所以用row将所有的col包裹，row会有一个-15px的margin，可以抵消掉一个container或col产生的15px的padding值。 另，官网中的关于gutter的条目中的示例：（https://getbootstrap.com/docs/4.3/layout/grid/） <div class="conta.
bootstrap栅格系统
silent
08-29 755
最近在使用bootstrap,在网上找了点资料,本文引自http://v2.bootcss.com/scaffolding.htmlBootstrap建立在12列栅格系统、布局、组件之上,必须使用HTML5文档类型 Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。<!DOCTYPE html> <ht
【Bootstrap】快速上手Bootstrap 第二部分 Bootstrap布局（重要）
Trees__的博客
07-02 769
食用文档 它指的就是将页面划分成等宽的列,通过列数来实现模块化页面布局,最多分为12列行(row)必须要放到container布局容器里面,行是列的包装器。要想实现列的平均划分,需要给列添加类前缀列最多12,如果大于12,多余的列会被当做一个新的整体另起一行,如果小于12那么一行就占不满可以同时给一个列指定多个类前缀,用于划分不同份数 2.2.1 列嵌套 列嵌套: 在栅格系统中可以将内容再次嵌套,就是在一个列中再次分成若干份小列 2.2.2 列偏移 列偏移: 不想要相邻的列紧靠在一起,可以使用类将
Bootstrap弹性页面布局
weixin_44549995的博客
05-17 2325
Bootstrap弹性页面布局 所谓的弹性布局就是适应多款浏览器 不同的宽度布局的显示相对来说占的百分比是一样的 甚至宽度不足时还会自动换行剩余元素等分空间 使得页面布局在不同的浏览器中显示不混乱 在这里我要讲的是利用bootstrap插件进行弹性布局 Bootstrap布局是给元素添加封装好样式的类名 弹性布局第一步布局是给最外层的元素添加类名container-fluid container-...
bootstrap源码分析系列：二，栅格和响应式布局
言川的博客
01-03 1万+
bootstrap把response单独分开作为一个独立模块 这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的，并且分为固定和流式两种，响应式布局就是通过media query增加了对不同屏幕宽度的适应。 布局上，通过容器的负padding-left和每一个列的margin-left来实现的，如下图所示： 一，定宽栅格的实现
Bootstrap 栅格系统的精妙之处
01-04 4234
节选翻译自The Subtle Magic Behind Why the Bootstrap 3 Grid Works 从接触 Bootstrap 已经有很长时间了，给人的感觉是快速，简单，易上手，其中栅格系统是一个亮点： 一直感觉像 CSS 栅格系统之类的东西拿过来用就好了，不用深究背后的原理。直到有一天你发现简单的套用在稍复杂的页面上出现问题，间隔啊，内外边距啊，哪都不对劲儿。
Bootstrap学习（一）
weixin_33736832的博客
09-14 155
最近开始学习Bootstrap，做一些笔记哦。 1、row与row-fluid： //row<divclass="row"><divclass="span8">...</div><divclass="span4">...</div></div>//row-fluid<...
bootstrap中container类和container-fluid类的区别
热门推荐
Hey firefly
03-26 6万+
container类和container-fluid类
container-fluid 和row
05-23
`container-fluid` 和 `row` 都是 Bootstrap 中用于布局的类。 `container-fluid` 是一个容器类，用于创建一个宽度为 100% 的容器。这个容器会在屏幕宽度变化时自动调整大小，以适应各种设备的屏幕大小。通常情况下，你会将其他元素放在 `container-fluid` 中，以便自适应屏幕宽度的布局。 `row` 是 Bootstrap 的网格系统中用于创建行的类。它是一个水平的 flexbox 容器，用于将列排列在一行中。在 `row` 中添加 `col` 类可以创建网格系统的列，这些列可以设置为不同的宽度和偏移量，以实现各种布局需求。在布局时，通常会将 `row` 作为 `container-fluid` 的子元素来使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值