刚下载了3.1,在文档中找到了...
通过将最外面的.container
更改为.container-fluid
,将任何固定宽度的网格布局转换为全宽度布局。
在bootstrap.css
中,.container-fluid
与.container
完全相同,两者都有相同的CSS,并且.container-fluid
的每个示例都与.container
配对,所有列类都用百分比指定。
当我摆弄例子时,我看不出有什么不同,因为一切似乎都是流动的。
Bootstrap. container和. container-fluid类之间的区别是什么?
8条答案
按热度按时间pxyaymoc1#
快速版本:
.container
对于 Bootstrap 中的每种屏幕大小都有一个固定宽度(xs、sm、md、lg);.container-fluid
扩展以填充可用宽度。container
和container-fluid
之间的区别来自CSS的以下行:container
类根据浏览网页的viewport的宽度为div指定一个固定的宽度,container-fluid
中不存在任何形式的线条,所以viewport的宽度每次改变,div的宽度也随之改变。例如,假设你的浏览器窗口是1000 px宽,因为它大于最小宽度992 px,所以你的
.container
元素的宽度将是970 px,然后你慢慢地加宽你的浏览器窗口,你的.container
的宽度不会改变,直到你达到1200 px,然后它会跳到1170 px宽,并在任何更大的浏览器宽度下保持不变。另一方面,当您对浏览器宽度进行哪怕是最小的更改时,
.container-fluid
元素也会不断调整大小。vfwfrxfs2#
我想你是在说
container
与container-fluid
是对网格响应和不响应的区别,这是不正确的......要说的是宽度不是固定的......它是全宽的!这很难解释,所以让我们看一下示例
container-fluid
:http://www.bootply.com/119981
所以你可以看到容器是如何占据整个屏幕的...这是一个
container-fluid
。现在,让我们看看其他只是一个正常的
container
和观看预览的边缘container
http://www.bootply.com/119982
现在你看到例子中的空白了吗?那是因为它是一个固定宽度
container
!在两个不同的标签页中打开两个例子并来回切换可能更有意义。更好的是,这里有一个同时使用两个容器的示例!现在您可以真正区分它们了!
http://www.bootply.com/119983
我希望这有助于澄清一点!
vybvopom3#
.container
和.container-fluid
都有响应(即它们根据屏幕宽度改变布局),但方式不同(我知道,命名听起来不是这样)。.container
是跳跃/起伏不定的大小调整,以及.container-fluid
是连续/精细调整宽度:百分之百。.container-fluid
会随着窗口/浏览器宽度的变化而不断调整大小,不会在窗口两侧留下多余的空间,这与.container
不同。(因此命名为:与"数字"、"离散"、"分块"或"量化"相对的"流体")。.container
在几个特定的宽度上分块调整大小。换句话说,它将是不同的特定又名"固定"宽度不同范围的屏幕宽度。语义:"固定宽度"
你可以看到命名的混乱是如何产生的。从技术上讲,我们可以说
.container
是"固定宽度",但它是固定的,只是在它不调整每一个粒度的宽度。它实际上不是"固定"的,因为它总是停留在一个特定的像素宽度,因为它实际上可以改变大小。.container-fluid
具有CSS属性width: 100%;
,因此它会在每个屏幕宽度粒度上不断地重新调整。.container
有类似于"宽度= 800px"的内容(或em、rem等),不同屏幕宽度下的特定像素宽度值。这当然是当屏幕宽度超过屏幕宽度阈值时,元素宽度突然跳到不同宽度的原因。该阈值由CSS3媒体查询控制,允许您在不同条件下应用不同的样式。例如屏幕宽度范围。您可以通过媒体查询使任何固定宽度的元素响应,而不仅仅是
.container
元素,因为媒体查询正是.container
在后台通过bootstrap实现的方式(参见JKillian对代码的回答)。c9x0cxw04#
当你想让你的页面在视口大小上改变形状时,使用
.container-fluid
。当您希望页面仅变形为4种大小**(也称为**“断点”)时,请使用
.container
。**与其大小对应的断点为:
gwbalxhn5#
2019年更新
基本的区别是
container
是响应式缩放,而container-fluid
总是width:100%
,因此在根CSS定义中,它们看起来是一样的,但是如果你进一步观察,你会发现.container
绑定到媒体查询。container
有5种宽度...container
有4种尺寸。xs
屏幕上为全宽,然后它的宽度根据以下媒体查询而变化。container vs. container-fluid demo
lc8prwob6#
.container
具有最大宽度像素值,而.container-fluid
是最大宽度100%。.container-fluid
会随着您更改窗口/浏览器的宽度而不断调整大小。.container
可以在多个特定宽度的块中调整大小,由媒体查询控制(从技术上讲,我们可以说它是“固定宽度”,因为像素值是指定的,但如果你停在那里,人们可能会得到它不能改变大小的印象-即没有响应。)vmdwslir7#
从显示的Angular 来看,
.container
使您能够更好地控制用户看到的内容,并且由于您只有4种不同的显示(在bootstrap 5中为5种),因此更容易看到用户看到的内容,因为这些大小与网格大小相同,例如.col-xs
、.col-sm
、.col
和.col-lg
。这意味着,当您进行用户测试时,如果您在具有4种不同尺寸的显示器上进行测试,您将看到显示器中的所有版本。
当使用
.container-fluid
时,因为宽度与视口宽度相关,显示是动态的,所以变化要大得多,使用非常大的屏幕或不常见的屏幕宽度的用户可能会看到你意想不到的结果。5ktev3wc8#
您在3.1中是正确的。container-fluid和.container是相同的,并且像container一样工作,但是如果您删除它们,它就像.container-fluid(全角)一样工作。他们在“移动的First Approach”中删除了.container-fluid,但是现在它又回到了3.3.4中(并且它们的工作方式将有所不同)
要获取最新的 Bootstrap ,请阅读stackoverflow上的这篇文章,这将有助于**check it out**。