Detailed explanation of container and container_fluid outer container in bootstrap3

This article mainly introduces the difference between container and container_fluid in ootstrap3. .container and .container_fluid are two different types of outer containers in bootstrap. Friends in need can refer to it, I hope it can help everyone.

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

The .container class is used to fix the width and 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;
}

Related recommendations:

About how to install through Hyper-V in Windows Server2016 Detailed explanation of Liunx Container (picture)

Laravel WEB APP based on Container Event container event

About Container, Command Bus, Event in Laravel5

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