Home > Article > Backend Development > 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
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!