Bootstrap的container和container-fluid区别

已于 2023-08-30 16:51:22 修改
阅读量228 收藏
点赞数
文章标签： bootstrap 前端框架
于 2023-08-30 16:35:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53873860/article/details/132585496
版权

1、.container类用于固定宽度并支持响应式布局的容器。(浏览器两侧留白)
<div class="container">

...
</div>


2、.container-fluid类用于100%宽度，占据全部视口(viewport)的容器。（浏览器两侧撑满，不留白）
<div class="container-fluid">

...
</div>

 

 区别如图，上面是container ，下面是container-fluid

两者不兼容 ,一般使用其中一个

不动则不……
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap（bootstrap的栅格系统、bootstrap的布局容器）
m0_46420078的博客
02-03 6061
一、bootstrap的栅格系统 用固定的格子进行网页布局，又称为网格布局 1、响应式栅格系统 使用响应式栅格系统进行页面布局时，网页根据不同的显示终端展示不同的页面结构。 例如，在校屏幕上由某些模块将按照不同的方式排列或者被隐藏。 2、创建使用响应式栅格系统页面的步骤（1）创建html页面 定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代 码（2）编写css样式 页头和页尾分别显示在网页的最上方和最下方，而中间的导航、主要内容和侧边栏根据浏览器窗口的大小...
Bootstrap的container和container-fluid
allway2的博客
11-22 6208
Containers容器 容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。容器用于在其中容纳，填充和（有时）使内容居中。尽管可以嵌套容器，但是大多数布局都不需要嵌套容器。 Bootstrap带有三个不同的容器： .container，它max-width在每个响应断点处设置一个 .container-fluid，这是width: 100%所有断点 .container-{breakpoint}，width: 100%直到指定的断点为止 下表说明了每个容器max
Bootstrap的布局容器类container与类container-fluid有什么区别,分别用在什么地方？
最新发布
昊虹AI笔记
08-24 1200
Bootstrap的类container与类container-fluid有什么区别？
bootstrap框架的.container 和container-fluid 类的区别
热门推荐
zhongmei121的专栏
06-02 7万+
.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。通过使用chrome浏览器实验html代码：得出以下结论：1、.container类的div左右两边有一个15px的padding（内边距），container-fluid类没有内边距2、.container类在屏幕宽度小于等于767px的时...
bootstrap3中container与container_fluid的区别
12-03 245
.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是： 　　.container 类用于固定宽度并支持响应式布局的容器。 　　.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据...
bootstrap3中container与container_fluid容器的区别
林中路
04-24 4万+
.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是： .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 一开始，我以为所谓固定宽度是开发者可以设置该容器为固定宽度，所以我采用了如下布局样式：<b
bootstrap3中container与container_fluid外层容器的区别讲解
08-28
在Bootstrap3中，`container` 和 `container_fluid` 是两种不同的外层容器，它们在布局和响应式设计方面有所区别。 1. `.container` 容器： `.container` 是用于创建固定宽度的容器，它会根据屏幕宽度自动调整其...
Python Flask Web开发入门之Bootstrap介绍使用和Flask-Nav快速导航栏 共10页.pdf
06-05
在使用 Bootstrap 和 Flask-Nav 时，需要在模板中使用正确的语法来渲染组件，例如使用 {{ bootstrap.fluid_container() }} 语句来渲染一个响应式的容器。使用正确的语法可以确保组件正确渲染。 在使用 Bootstrap 和...
bootstrap.zip---栅格系统源码
04-11
源码中，我们可以看到`.container`、`.container-fluid`类用于定义页面容器，它们提供了固定的和全宽度的布局选项。`.row`类是栅格系统的基础，用于创建一行内容，它包含了负margin来抵消内部列的padding，从而保持...
Bootstrap-4-Development-for-Professionals
05-26
4. **响应式工具**：为了实现移动优先的设计，Bootstrap 4 提供了`.container`、`.container-fluid`和`.row`等工具，它们在不同设备上自动调整大小，确保内容在各种屏幕尺寸下都能良好显示。 5. **字体和图标**：...
Bootstrap之栅格布局
青春木鱼的博客
11-03 1597
Bootstrap提供了.cintainer和.container-fluid两种容器布局。这两种样式是启用布局栅格系统最基本的要素。.cintainer是固体自适应方式，.container-fluid是流体100%自适应方式。容器布局可以嵌套，但一般不推荐使用。Bootstrap是以移动端优先的
container 和container-fluid区别
lijianli_131300的博客
08-03 2223
摘自网络。 （1）container-fluid的width是100％，而container的width是用媒体查询获得的动态尺寸。两者样式肯定是不一样的。并且由于  padding的原因两者不可用嵌套，他们就是提供两种视觉风格。 （2）container-fluid和container 全部都是响应式的布局。只是container有1个98px的margin 存在 Container-fl...
bootstrap-栅格系统（响应式布局）
kjw888的博客
07-22 2846
文章目录一、优点二、实现三、执行过程（1）定义容器（2）定义行（3） 定义元素四、注意事项（1） 自动换行（2）向上兼容性（3）向下不兼容性 一、优点 同一套页面可以兼容不同分辨率的设备（例如手机和电脑访问同一页面可能由于分辨率的不同减低用户体验度，而响应式布局就很好的解决了这个问题） 二、实现 依赖与bootstrap的栅格系统来实现：将一个页面的一行划平均分为12个格子，栅格系统基于不同的分辨...
Bootstrap中container和container-fluid的区别
weixin_45846357的博客
05-11 343
html代码： 1、.container类在屏幕宽度小于等于767px的时候，宽度=屏幕宽度的，也就是100%，container-fluid类不管屏幕宽度大小，一直是100% 屏幕宽767px： 2、屏幕宽一直拉大（<1000px）：.container类的div左右出现外边距margin，它会随着屏幕的增大而增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。.container-fluid类宽度不管屏幕宽度大小，一直是100%。 3、屏幕拉大到1000px的
Bootstrap
黄黄黄一边敲代码一边写出来的博客
05-01 180
Bootstrap 一、布局容器 Bootstrap需要为页面内容和栅格系统包裹一个.container容器。框架中提供了两个类 .container 类 用于固定宽度并支持响应式布局的容器 <div class = "container"> ... </div> .container-fluid 类 用于100%宽度，占据全部视口（viewport）的容器。 <div class="container-fluid"> ... </div> 注意：由于pa
Bootstrap之container与container-fluid
XINGKONG_04的博客
12-13 1247
CSS继承 响应式框架Bootstrap,Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。 通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
.Container与.container_fluid区别
weixin_30352191的博客
11-23 157
.Container与.container_fluid是bootstrap中的两种不同类型的外层容器，两者的区别是：.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器,自动实现响应式。 转载于:https://www.cnblogs.com/supershare/p/6095602.html...
bootstrap4笔记
y13552128229的博客
06-12 1860
布局 Container 容器 Container容器是窗口布局的最基本元素，推荐所有样式都定义在.container或.container-fluid容器中。这是启动整个栅格系统必不可少的前置条件。 三种container宽度规范： .container,实现固定的宽度并居中呈现，适配不同的max-width尺寸 .container-fluid，全屏，适配屏幕的width:100%尺寸,流式布局 .container-{断点规格}，在指定规格上的width:100% Bootstrap的网格系统使用
BootStrap 入门学习笔记之container和container-fluid
苝花向暖丨楠枝向寒
04-08 1828
BootStrap重写了 css的一些标签，比如p标签，默认字体大小 等等。而且预先写好了一些 CSS样式，我们可以给 div加指定的标签，来用人家预先写好了的样式，进行布局 ，装饰等等。class=“container”例子1：例子2：通过上述两个例子 可以看出、container 默认居中，如果没有设置宽度、默认在浏览器左右两边留出固定的距离。如果设置了宽度，则div变为 设置的宽度、同时保证...
container-fluid 和row
05-23
`container-fluid` 和 `row` 都是 Bootstrap 中用于布局的类。 `container-fluid` 是一个容器类，用于创建一个宽度为 100% 的容器。这个容器会在屏幕宽度变化时自动调整大小，以适应各种设备的屏幕大小。通常情况下...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值