Home > Article > Web Front-end > Detailed explanation of container and container_fluid outer container in bootstrap3
Detailed explanation of container and container_fluid outer container in bootstrap3
- 小云云Original
- 2018-01-05 10:33:101672browse
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:
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!