Do you need to use Bootstrap's “container” and

问题:

I think the standard of Bootstrap 3 and 4 is

<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>

But what if you have a div, table, form, or any element, that you plan to just let it span the whole width? Then do you need the container or row or col-md-12 at all, for the whole page to display well under the styling rules of Bootstrap 3 and 4?

P.S. if possible, please point to or quote the official Bootstrap docs related to this.

回答1:

Short answer: you do need to use container, but you don't need to use row.

You can put elements directly in the container or container-fluid. You aren't required to use the grid (.row and .col-*), and the container alone can be used as a container of content. Only use the grid when you need the responsive 12-unit structure.

For example, this is valid Bootstrap...

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

From the Bootstrap docs...

"Bootstrap requires a containing element to wrap site contents and house our grid system."

So, the purpose of container is two-fold: 1) to "house the grid system", and 2) to "wrap site contents". However, when you do use the grid (.row and .col-*), a container is required to wrap the .row.

Even the basic starter template utilizes container without the grid.

In summary...

• You can use .container or .container-fluid alone to contain elements and page content.
• If you use the grid (.row and .col-*), .row must be inside a .container or .container-fluid, and .col-* must be inside a .row.

回答2:

You should add .container-fluid to your wrapping div. You should wrap the table, div, or form within a div add the class .container-fluid to it.

The official bootstrap documentation on grid system

回答3:

You should use the .container-fluid class if you want your content to span the full width of the document. Without this class the negative margins of .row will cause horizontal scrolling.

You could possibly omit the container-fluid and row but this may cause unexpected results when using other Bootstrap components.

.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>

回答4:

Use fluid-container to span entire width of parent.