Bootstrap .container和.container-fluid类之间的区别是什么?

pgvzfuti  于 2022-12-31  发布在  Bootstrap
关注(0)|答案(8)|浏览(184)

刚下载了3.1,在文档中找到了...
通过将最外面的.container更改为.container-fluid,将任何固定宽度的网格布局转换为全宽度布局。
bootstrap.css中,.container-fluid.container完全相同,两者都有相同的CSS,并且.container-fluid的每个示例都与.container配对,所有列类都用百分比指定。
当我摆弄例子时,我看不出有什么不同,因为一切似乎都是流动的。
Bootstrap. container和. container-fluid类之间的区别是什么?

pxyaymoc

pxyaymoc1#

快速版本:.container对于 Bootstrap 中的每种屏幕大小都有一个固定宽度(xs、sm、md、lg); .container-fluid扩展以填充可用宽度。

containercontainer-fluid之间的区别来自CSS的以下行:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

container类根据浏览网页的viewport的宽度为div指定一个固定的宽度,container-fluid中不存在任何形式的线条,所以viewport的宽度每次改变,div的宽度也随之改变。
例如,假设你的浏览器窗口是1000 px宽,因为它大于最小宽度992 px,所以你的.container元素的宽度将是970 px,然后你慢慢地加宽你的浏览器窗口,你的.container的宽度不会改变,直到你达到1200 px,然后它会跳到1170 px宽,并在任何更大的浏览器宽度下保持不变。
另一方面,当您对浏览器宽度进行哪怕是最小的更改时,.container-fluid元素也会不断调整大小。

vfwfrxfs

vfwfrxfs2#

我想你是在说containercontainer-fluid是对网格响应和不响应的区别,这是不正确的......要说的是宽度不是固定的......它是全宽的!
这很难解释,所以让我们看一下示例

    • 示例一**

container-fluid
http://www.bootply.com/119981
所以你可以看到容器是如何占据整个屏幕的...这是一个container-fluid
现在,让我们看看其他只是一个正常的container和观看预览的边缘

    • 示例二**

container
http://www.bootply.com/119982
现在你看到例子中的空白了吗?那是因为它是一个固定宽度container!在两个不同的标签页中打开两个例子并来回切换可能更有意义。

    • 编辑**

更好的是,这里有一个同时使用两个容器的示例!现在您可以真正区分它们了!
http://www.bootply.com/119983
我希望这有助于澄清一点!

vybvopom

vybvopom3#

.container.container-fluid都有响应(即它们根据屏幕宽度改变布局),但方式不同(我知道,命名听起来不是这样)。

    • 简短回答:**

.container是跳跃/起伏不定的大小调整,以及
.container-fluid是连续/精细调整宽度:百分之百。

    • 从功能Angular 看:**

.container-fluid会随着窗口/浏览器宽度的变化而不断调整大小,不会在窗口两侧留下多余的空间,这与.container不同。(因此命名为:与"数字"、"离散"、"分块"或"量化"相对的"流体")。
.container在几个特定的宽度上分块调整大小。换句话说,它将是不同的特定又名"固定"宽度不同范围的屏幕宽度。
语义:"固定宽度"
你可以看到命名的混乱是如何产生的。从技术上讲,我们可以说.container是"固定宽度",但它是固定的,只是在它不调整每一个粒度的宽度。它实际上不是"固定"的,因为它总是停留在一个特定的像素宽度,因为它实际上可以改变大小。

    • 从基本面来看:**

.container-fluid具有CSS属性width: 100%;,因此它会在每个屏幕宽度粒度上不断地重新调整。

.container-fluid {
  width: 100%;
}

.container有类似于"宽度= 800px"的内容(或em、rem等),不同屏幕宽度下的特定像素宽度值。这当然是当屏幕宽度超过屏幕宽度阈值时,元素宽度突然跳到不同宽度的原因。该阈值由CSS3媒体查询控制,允许您在不同条件下应用不同的样式。例如屏幕宽度范围。

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}
    • 超越**

您可以通过媒体查询使任何固定宽度的元素响应,而不仅仅是.container元素,因为媒体查询正是.container在后台通过bootstrap实现的方式(参见JKillian对代码的回答)。

c9x0cxw0

c9x0cxw04#

当你想让你的页面在视口大小上改变形状时,使用.container-fluid
当您希望页面
仅变形为4种大小**(也称为**“断点”)时,请使用.container。**
与其大小对应的断点为:

  • 超小号:(仅限移动的分辨率)
  • 小号:768 px(平板电脑)
  • 中:992 px(笔记本电脑)
  • 大:1200 px(笔记本电脑/台式机)
gwbalxhn

gwbalxhn5#

2019年更新

基本的区别是container是响应式缩放,而container-fluid总是width:100%,因此在根CSS定义中,它们看起来是一样的,但是如果你进一步观察,你会发现.container绑定到媒体查询。

    • Bootstrap 4**

container有5种宽度...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
    • Bootstrap 3**

container有4种尺寸。xs屏幕上为全宽,然后它的宽度根据以下媒体查询而变化。

@media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

container vs. container-fluid demo

lc8prwob

lc8prwob6#

.container具有最大宽度像素值,而.container-fluid是最大宽度100%。
.container-fluid会随着您更改窗口/浏览器的宽度而不断调整大小。
.container可以在多个特定宽度的块中调整大小,由媒体查询控制(从技术上讲,我们可以说它是“固定宽度”,因为像素值是指定的,但如果你停在那里,人们可能会得到它不能改变大小的印象-即没有响应。)

vmdwslir

vmdwslir7#

从显示的Angular 来看,.container使您能够更好地控制用户看到的内容,并且由于您只有4种不同的显示(在bootstrap 5中为5种),因此更容易看到用户看到的内容,因为这些大小与网格大小相同,例如.col-xs.col-sm.col.col-lg
这意味着,当您进行用户测试时,如果您在具有4种不同尺寸的显示器上进行测试,您将看到显示器中的所有版本。
当使用.container-fluid时,因为宽度与视口宽度相关,显示是动态的,所以变化要大得多,使用非常大的屏幕或不常见的屏幕宽度的用户可能会看到你意想不到的结果。

5ktev3wc

5ktev3wc8#

您在3.1中是正确的。container-fluid和.container是相同的,并且像container一样工作,但是如果您删除它们,它就像.container-fluid(全角)一样工作。他们在“移动的First Approach”中删除了.container-fluid,但是现在它又回到了3.3.4中(并且它们的工作方式将有所不同)
要获取最新的 Bootstrap ,请阅读stackoverflow上的这篇文章,这将有助于**check it out**。

相关问题