1. 程式人生 > >bootstrap中contain和contain-fluid的區別

bootstrap中contain和contain-fluid的區別

container和container-fluid是bootstrap的外層容器。首先,兩者都是支援響應式佈局的,也就是會適應不同的裝置改變寬度,區別是container是固定寬度,bootstrap為不同裝置設定了不同的固定寬度,而container-fluid是100%寬度,寬度會盡可能的寬。

container和container-fluid共有的樣式是這個,

.container-fluid ,.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

但container有媒體查詢

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

所以當你改變瀏覽器視窗寬度時,你會看到container會有階段性的寬度變化,而container-fluid始終保持100%寬度。

既然container-fluid是用百分比寬度,那麼就可以當做內嵌了一個隨父元素大小而改變的盒子啦。



也不難理解,fluid就是液體的意思,把水倒進盒子裡,水當然會充滿整個盒子。

本來還想傳多兩張照片,但不知為什麼傳不了。

小菜鳥一個,有什麼不對的請指出,期望您的指點一二。

相關推薦

bootstrapcontainercontainer-fluid區別

‘container ’demo <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"

bootstrapcontaincontain-fluid區別

container和container-fluid是bootstrap的外層容器。首先,兩者都是支援響應式佈局的,也就是會適應不同的裝置改變寬度,區別是container是固定寬度,bootstrap為不同裝置設定了不同的固定寬度,而container-fluid是100%

JSisPrototypeOf hasOwnProperty 的區別

另一個 strong 是否 指定 不同 名稱 功能 成員 eof 1、isPrototypeOf isPrototypeOf是用來判斷指定對象object1是否存在於另一個對象object2的原型鏈中,是則返回true,否則返回false。 格式如下: object1.is

Pythonsort()sorted()的區別

-s 可變對象 傳遞 內置函數 ict pan 16px nbsp lin 1、sort()是可變對象(字典)的方法,無參數,無返回值, sort()會改變可變對象,因此無需返回值。例如: list: 1 >>> a = [4,3,7,8] 2 >

Hibernateget()load()的區別

factory all htm on() 被調用 容易 transacti rip con Hibernate中根據Id單條查詢獲取對象的方式有兩種,分別是get()和load(),來看一下這兩種方式的區別。 1. get() 使用get()來根據ID進行單條查詢:

Sql語句INexists的區別及應用

應用場景 將不 集中 pre 代碼 根據 gif 效率 .cn   表展示     首先,查詢中涉及到的兩個表,一個user和一個order表,具體表的內容如下:     user表:          order表:        in     確定給定的值是否與子查

java棧的區別

mem 線程 所有 生成 werror 空間 調用 訪問 指向 01,各司其職;         棧內存用來存儲局部變量和方法的調用,         而堆內存用來存儲java中的對象,無論是成員變量,局部變量,還是類變量         他們指向的對象都存儲在堆內存中。

jsundefinednull的區別

常常 html exist tex 輸出 output 為什麽 hive 存在 轉自:http://www.cnblogs.com/eastday/archive/2010/03/03/1677324.html 在JavaScript中存在這樣兩種原始類型:Null與Und

PHPempty()isset()的區別

tom 常量 def -1 最大 解析 如果 sse add 先說一下他們的共同點: 都可以判定一個變量是否為空; 都返回boolean類型,即true或false。 下面具體說一下他們用法之間的區別: isset()用來檢測變量是否設置,只能用於變量,因為

jseval()$.parseJSON()的區別

16px 異常 comment 而不是 str on() ajax 鏈接 強制 之前自己一直對ajax不是特別的熟悉,所以一般都很少用這個去寫功能,但是最近這個項目中用到了,用ajax異步傳數據,json傳數據這個時候就需要去解析傳過來的數據了,eval()和$.parse

cssemrem的區別

子元素 字體大小 響應式布局 布局 height root html中 頁面 長度單位 在css中單位長度用的最多的是px、em、rem,這三個的區別是:1.px是固定的像素,一旦設置了就無法因為適應頁面大小而改變。2.em和rem相對於px更具有靈活性,他們是相對長度單位

C++typenameclass的區別

type .get true 能夠 class .... ray pla 依賴 在c++Template中很多地方都用到了typename與class這兩個關鍵字,而且好像可以替換,是不是這兩個關鍵字完全一樣呢? 相信學習C++的人對class這個關鍵字都非常明白,clas

Jscallercallee的區別

存在 ons var nbsp fun 區別 test 函數對象 返回 1 :caller 返回一個調用當前函數的引用 如果是由頂層調用的話 則返回null (舉個栗子哈 caller給你打電話的人 誰給你打電話了 誰調用了你 很顯然是下面a函數的執行 只有在打電話的時候

JavascriptinnerHTMLinnerText的區別

utf meta charset 測試 第一個 class utf-8 html標簽 技術分享 innerHTML:獲取的是從對象的起始位置到終止位置的全部內容,包括HTML標簽 innerText:獲取的是起始位置到終止位置的內容,但是會將HTML標簽去掉 下面寫一段代碼

PHPincluderequire的區別詳解

for in repl 這不 語句 沒有 16px targe size something 1、概要    require()語句的性能與include()相類似,都是包括並運行指定文件。不同之處在於:對include()語句來說,在執行文件時每次都要進行讀取和評估;

C++編程const#define的區別

程序 存在 pan best color 普通 分配 一次 def (1) 編譯器處理方式不同  define宏是在預處理階段展開。  const常量是編譯運行階段使用。(2) 類型和安全檢查不同  define宏沒有類型,不做任何類型檢查,僅僅是展開。  const常量有

javaComparator Comparable的區別

true public arr ins ride err instance ural code 1、Comparable的代碼如下: public interface Comparable<T> { public int compareTo(T o);

SQLonwhere的區別

知識庫 mysq sdn pad 行數 full join sel targe 知識 這篇博客參考了網上的,具體哪一篇是原稿,不知道,特此聲明。 數據庫在通過連接兩張或多張表來返回記錄時,都會生成一張中間的臨時表,然後再將這張臨時表返回給用戶。 下面以使用le

vs main_tmain的區別

include 哪裏 入口 tps 如果 tar .com main 進行 用過C的人都知道每一個C的程序都會有一個main(),但有時看別人寫的程序發現主函數不是int main(),而是int _tmain(),而且頭文件也不是<iostream.h>而是&

Hibernategetload的區別

實體對象 alt 返回 images get .get 技術 log 查詢語句 在Hibernate中我們知道如果要從數據庫中得到一個對象,通常有兩種方式,一種是通過session.get()方法,另一種就是通過session.load()方法,然後其實這兩種方法在獲得