簡述container與container-fluid的區別

在bootstrap中的布局容器一欄中,提供了container與container-fluid兩種容器,其官方解釋為:

.container 類用于固定寬度并支持響應式布局的容器。

.container-fluid 類用于 100% 寬度,占據全部視口(viewport)的容器。

所以,先說一說它們的共同點:這兩種容器的高度設定都是一致的,都為auto。而他們的不同就在于它們寬度的設定上。

  • container根據屏幕寬度利用媒體查詢,已經設定了固定的寬度,作用為階段性的改變寬度,所以在改變瀏覽器的大小時,頁面是一個階段一個階段變化的。

  • container-fluid則是將寬度設定為auto,所以當縮放瀏覽器時,它會保持全屏大小,始終保持100%的寬度。

如果比喻的話,container就如一個嵌套的水池,只有當最里面最小的那個池子注滿水后才會溢到下一個更大的池子,而container-fluid則沒有隔斷,倒入多少水,就充滿多少。

還有一點則是使用container時,你會發現在容器外有一個隨著瀏覽器寬度變化而變化的margin,而使用container-fluid則沒有這個margin。而這個margin正是container的作用原理。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/541399.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/541399.shtml
英文地址,請注明出處:http://en.pswp.cn/news/541399.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

centos php fpm 停止_如何關閉php-fpm進程?

因為你是編譯的,可以在源碼中復制php-fpm的init文件到系統中:cp -f sapi/fpm/init.d.php-fpm /etc/init.d/php-fpm然后就可以使用以下命令啟動、停止、重啟和重新加載php-fpm了:service php-fpm startservice php-fpm restartservice php-fpm…

minus_Java Duration類| minus()方法與示例

minus持續時間類minus()方法 (Duration Class minus() method) Syntax: 句法: public Duration minus(Duration d);public Duration minus(long amt, TemporalUnit t_unit);minus() method is available in java.time package. minus()方法在java.time包中可用。 m…

Mongodb聚合函數

插入 測試數據 for(var j1;j<3;j){ for(var i1;i<3;i){ var person{Name:"jack"i,Age:i,Address:["henan","wuhan"],Course:[{Name:"shuxue",Score:i},{Name:"wuli",Score:i}]}db.DemoTest.Person.insert(pers…

php rename函數_php rename函數怎么用

PHP rename()函數用于重命名文件或目錄&#xff0c;語法“rename(文件舊名稱,新名稱,句柄環境)”&#xff0c;使用用戶指定的新名稱更改文件或目錄的舊名稱&#xff0c;并且可以根據需要在目錄之間移動&#xff1b;成功時返回True&#xff0c;失敗時返回False。php rename()函數…

Java BigInteger類| xor()方法與示例

BigInteger類的xor()方法 (BigInteger Class xor() method) xor() method is available in java.math package. xor()方法在java.math包中可用。 xor() method is used to perform xor operation between this BigInteger and the given BigInteger and we all know when we pe…

Spring Data Redis實戰之提供RedisTemplate

為什么80%的碼農都做不了架構師&#xff1f;>>> 參考&#xff1a; http://www.cnblogs.com/edwinchen/p/3816938.html 本項目創建的是Maven項目 一、pom.xml引入dependencies <dependency><groupId>org.springframework.data</groupId><artif…

Java BigInteger類| and()方法與示例

BigInteger類和()方法 (BigInteger Class and() method) and() method is available in java.math package. and()方法在java.math包中可用。 and() method is used to perform and operation between this BigInteger and the given BigInteger (val) [i.e. (this BigInteger)…

php映射,PHP實現路由映射到指定控制器

自定義路由的功能&#xff0c;指定到pathinfo的url上,再次升級之前的腳本SimpleLoader.phpclass SimpleLoader{public static function run($rulesarray()){header("content-type:text/html;charsetutf-8");self::register();self::commandLine();self::router($rule…

stl vector 函數_vector :: clear()函數,以及C ++ STL中的示例

stl vector 函數C vector :: clear()函數 (C vector::clear() function) vector::clear() is a library function of "vector" header, it is used to remove/clear all elements of the vector, it makes the 0 sized vector after removing all elements. vector …

Commonjs規范及Node模塊實現

前面的話 Node在實現中并非完全按照CommonJS規范實現&#xff0c;而是對模塊規范進行了一定的取舍&#xff0c;同時也增加了少許自身需要的特性。本文將詳細介紹NodeJS的模塊實現 引入 nodejs是區別于javascript的&#xff0c;在javascript中的頂層對象是window&#xff0c;而在…

thinkphp3 php jwt,ThinkPHP5 使用 JWT 進行加密

- 使用 Composer安裝此擴展- 代碼示例<?php /*** [InterCommon-接口公用]* Author RainCyan* DateTime 2019-08-12T16:38:080800*/namespace app\hladmin\controller;use think\Controller;use \Firebase\JWT\JWT;class InterCommonController extends Controller {private…

數據管理與商業智能_商業智能與數據科學

數據管理與商業智能In this heavily jargonized trade, the words typically overlap one another, leading to a scarcity of understanding or a state of confusion around these ideas. whereas big data vs analytics or computing vs machine learning vs cognitive inte…

JavaWeb網上圖書商城完整項目--day02-14.登錄功能的login頁面處理

1、現在注冊成功之后&#xff0c;我們來到登錄頁面&#xff0c;登錄頁面在于 在登錄頁面。我們也需要向注冊頁面一樣對登錄的用戶名、密碼 驗證碼等在jsp頁面中進行校驗&#xff0c;校驗我們單獨放置一個login.js文件中進行處理&#xff0c;然后login.jsp加載該js文件 我們來看…

php多線程是什么意思,多線程是什么意思

線程是操作系統能夠進行運算調度的最小單位&#xff0c;它被包含在進程之中&#xff0c;是進程中的實際運作單位&#xff0c;而多線程就是指從軟件或者硬件上實現多個線程并發執行的技術&#xff0c;具有多線程能力的計算機因有硬件支持而能夠在同一時間執行多于一個線程&#…

c++一個類創建多個對象_C ++ | 創建一個類的多個對象

c一個類創建多個對象In the below program, we are creating a C program to create multiple objects of a class. 在下面的程序中&#xff0c;我們正在創建一個C 程序來創建一個類的多個對象 。 /* C program to create multiple objects of a class */#include <iostrea…

Activity中與ListActivity中使用listview區別

一.Activity中與ListActivity中使用listview區別&#xff08;本身沒多大區別&#xff0c;只是ListActivity在listview的顯示上做了一些優化&#xff09;Activity中使用Listview步驟&#xff1a;1.xml布局中,ListView標簽id可以任意取值如&#xff1a;<ListView andro…

java相關是什么,什么是java

java基礎常見面試題&#xff0c;這是一篇超長的隨筆&#xff01;&#xff01;&#xff01;1. Java基礎部分....................................................... 4 1、一個".java"源文件中是否可以包括多個類(不是內部類)&#xff1f;有什么限制&#xff1f;.. …

如何在Scala中將Double轉換為String?

Double in Scala is a data type that stores numerical values that have decimals. It can store a 64-bit floating point number. Scala中的Double是一種數據類型&#xff0c;用于存儲帶有小數的數值。 它可以存儲一個64位浮點數。 Example: 例&#xff1a; val decimal…

basic knowledge

Position 屬性&#xff1a;規定元素的定位類型。即元素脫離文檔流的布局&#xff0c;在頁面的任意位置顯示。 ①absolute &#xff1a;絕對定位&#xff1b;脫離文檔流的布局&#xff0c;遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)&…

avatar.php uid,phpcms函數庫中獲取會員頭像方法get_memberavatar()有時無效問題

修復方法&#xff1a;首先我先給出無效情況的演示代碼&#xff0c;如下&#xff1a;$userid intval($_GET[userid]);$userinfo $this->db->get_one(userid.$userid);$this->db->set_model(10); //原因便在這里$userdetail $this->db->get_one("useri…