Detailed interpretation of the container 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

.container and .container_fluid are two different types of outer containers in bootstrap. According to the official statement, these The difference between the two is:

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 borrowed code 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 is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Related folder structure configuration in vue

##How to configure the interface proxy using vue-cli

How to use form-data format to transfer files in NodeJs

How to implement lazy loading of images in WeChat applet

The above is the detailed content of Detailed interpretation of the container container in bootstrap3. For more information, please follow other related articles on the PHP Chinese website!