如果您的內容跨越整個寬度，您是否需要使用Bootstrap的「容器」和「行」？

Question

我想引導3和4的標準是

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> ... </div> 
     <div class="col-md-8"> ... </div> <!-- just add up to 12 --> 
    </div> 
</div> 

但是，如果你有一個div，table，form，或任何元素，你打算就讓它跨越整個寬度是多少？那麼您是否需要container或row或col-md-12，以便整個頁面能夠在Bootstrap 3和4的樣式規則下正常顯示？

P.S.如果可能的話，請指出或引用與此相關的官方Bootstrap文檔。

Answer 1

使用流體容器跨越父母的整個寬度。

Answer 2

如果您希望您的內容跨越文檔的整個寬度，則應使用.container-fluid類。如果沒有這個類，.row的負邊距將導致水平滾動。

您可能會忽略container-fluid和row但是當使用其他Bootstrap組件時，這可能會導致意外的結果。

.col-md-4 { 
 
    background: red; 
 
} 
 

 
.col-md-8 { 
 
    background: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> ... </div> 
 
    <div class="col-md-8"> ... </div> 
 
    </div> 
 
</div>

Answer 3

您應該添加.container-fluid到您的包裝股利。您應該將表格，div或表格封裝在div中，然後將類.container-fluid添加到它。

The official bootstrap documentation on grid system

Answer 4

簡短的回答：你做需要使用container，但你不需要使用row。

您可以將元素直接放入container或container-fluid。你是不是需要向使用網格（.row和.col-*），並容器單獨可以作爲內容的容器。只有在需要響應式12單元結構時才使用網格。

例如，這是有效的引導......

<div class="container"> 
    <h2>Hello World</h2> 
    <p class="lead">Some other content...</p> 
</div> 

從Bootstrap docs ...

「引導需要包含的元素來包裝網站內容和 房子我們的電網系統。 「

因此，container的目的是兩方面：1）「網格系統」，2）「包裝網站內容」。但是，當您使用網格（.row和.col-*）時，容器需要來包裝.row。

即使basic starter template利用container沒有電網。

總之...

• 您可以使用.container或.container-fluid獨自包含元素和頁面內容。
• 如果您使用網格（.row和.col-*），.row必須爲.container或.container-fluid和.col-*內必須是.row內。