問題

剛下載3.1並在文件中找到...

將任何 fixedwidget 網格佈局轉換為全寬佈局,將 outermer .container 更改為 .container-fluid

bootstrap.css,似乎.container-fluid.container相同.兩者都有相同的CSS,.container-fluid的每個例項與.container配對,所有列類都以百分比指定.

當我討厭示例時,我看不到任何區別,因為一切似乎都是流動的。

由於我是Bootstrap的新手,我假設我錯過了一些東西.有人可以花一分鐘啟發我嗎?

  最佳答案

快速版本:.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;
  }
}
 

根據瀏覽網頁的viewport的寬度,container類給其div一個特定的固定寬度.這些行不存在於container-fluid的任何形式,因此每次viewport寬度更改時它的寬度都會發生變化.

例如,假設你的瀏覽器視窗是1000px寬.由於它大於992px的最小寬度,你的.container元素的寬度將為970px.然後慢慢擴大你的瀏覽器視窗.在到達1200px之前,你的.container的寬度將不會改變,在這個寬度上它將跳躍到1170px,並以這種方式保持任何更大的瀏覽器寬度.

另一方面,當您對瀏覽器寬度進行最小的更改時,您的 .container-fluid 元素將不斷調整大小。

  相同標籤的其他問題

twitter-bootstraptwitter-bootstrap-3