.container-fluid/.container僅用於網格系統嗎？

我剛剛從https://www.w3schools.com/bootstrap/default.asp網站開始學習bootstrap。在該網站上聲明，.container-fluid和.container類必須用於網格系統，即只有當我們有行和列時。但是，即使沒有使用行和列，該網站上「導航欄」部分的所有代碼片段也使用.container-fluid類。導航欄使用ul（無序列表）創建。以下是一個例子：.container-fluid/.container僅用於網格系統嗎？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

因此，這裏的問題：在哪裏可以使用.container-fluid類？我可以將.container-fluid應用於我的整個頁面嗎？

來源

2017-06-22 Sai Charan

無論何時您需要一個跨越整個視口寬度的全寬度容器時，您都可以使用'.container-fluid'。 – MarioZ

通過視口您是否意味着觀點？ –

視口是用戶可見的網頁區域。 – MarioZ

根據所述引導site，這是一個「容器」的預期用法：

引導需要包含的元素包裹網站內容和房子我們的電網系統。您可以選擇兩個容器中的一個用於您的項目。請注意，由於填充等原因，兩個容器都不可嵌套。

將.container用於響應固定寬度的容器。

使用.container-fluid作爲全寬度容器，跨越視口的整個寬度。

因此，無論您是否有意將其用於網格系統，您仍可以使用其中一個或另一個作爲您的頁面內容（或其中的一部分）的容器。你會得到下面的CSS規則無論哪種方式，與子元素的一些不同的規則（下載源，並仔細閱讀它，看看）：

[both container and container-fluid] { 
     padding-right: 15px; 
     padding-left: 15px; 
     margin-right: auto; 
     margin-left: auto; 
     width: [for container this is based on media query] 
    } 
    :before,:after { 
     display: table; 
     content: " "; 
    } 
    :after { 
     clear: both; 
    }

典型用法是在身體內部一個div，不上身體本身，從我的經驗。

來源

2017-06-22 15:15:23

.container-fluid/.container僅用於網格系統嗎？

回答

相關問題