An explanation of the difference between container and container_fluid outer container in bootstrap3

.container and .container_fluid are two different types of outer containers in bootstrap. This article mainly introduces the difference between container and container_fluid in bootstrap3. Friends in need can refer to it.

The .container class is used for fixed-width containers that support responsive layout.

The .container-fluid class is used for containers with 100% width and occupying the entire viewport.

The so-called fixed width does not allow developers to set the width of the container themselves, but bootstrap uses media queries internally based on the screen width to help us set a fixed width, and it is adaptive. .

Degree, and it is adaptive. Under no circumstances should you manually set a fixed-width value for the outer layout container in a responsive layout.

.container-fluid is automatically set to 100% of the outer window. If the outer window is body, it will be displayed in full screen regardless of the screen size, and a responsive layout will be automatically implemented.

The following is the code borrowed for reference only:

/*0-768px以上宽度container为100%*/
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
/*container-fluid为100%*/
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

The above content is an explanation of the difference between container and container_fluid outer container in bootstrap3 , hope it can help everyone.

Related recommendations:

Bootstrap3.0 learning (1)_html/css_WEB-ITnose

How to quickly learn bootstrap3. 3.2

Bootstrap3-New Features

The above is the detailed content of An explanation of the difference between container and container_fluid outer container in bootstrap3. For more information, please follow other related articles on the PHP Chinese website!