CSS中的container-fuild,簡單來說,就是一個容器類,可以幫助我們實現全屏寬的設計效果。它是Bootstrap框架中的一個類,但也可以單獨使用。
.container-fluid { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
使用container-fuild后,容器會占據整個屏幕寬度,而不是默認的固定寬度。同時,由于margin和padding的值設定為自動和15像素,因此容器會自動適應不同的瀏覽器寬度,并且左右兩側會有15像素的留白。
如果想要在container-fuild內部放置內容,也可以使用.row和.col類來進行布局。其中,.row表示行,.col表示列。可進行分欄、響應式設計等操作。
這是左邊的內容
這是右邊的內容
在上面的代碼中,我們創建了一個container-fuild類的容器,并在其中創建了一個row類的行。在行內,分別使用.col-md-6類的列分欄,使左右兩側的容器分別占據整行的50%寬度。
總而言之,container-fuild類可以方便地實現全屏寬度的設計效果,同時也提供了分欄、響應式等布局功能,對于Web開發而言是非常實用的。