Explanation of the difference between container and container_fluid outer packagings in BOOTSTRAP3

. Container and. Container_fluid are two different types of outer packagings in bootstrap. This article mainly introduces the difference between container and container_fluid in Bootstrap3, and the friends who need can refer to it.

The. Container class is used to fix widths and supports a container for responsive layouts.

The. Container-fluid class is used for containers of 100% widths that occupy all viewports (viewport).

The so-called fixed width does not allow the developer to set the width of the container itself, but rather bootstrap the internal media query based on the width of the screen, helping us to set the fixed width and be adaptive.

And can be self-adapting. In either case, do not manually set a fixed-width value for the outer layout container in the responsive layout.

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

The following is a reference to the code, for informational purposes only:

/*0-768px above width container for 100%*/.container {padding-right:15px; padding-left:15px; margin-right:auto; Margin-left: Auto;} /*768-992px above width container is 750px*/@media (min-width:768px) {. container {width:750px;}} /*992-1200px above width container is 970px*/@media (min-width:992px) {. container {width:970px;}} /*1200px above width container is 1170px*/@media (min-width:1200px) {. container {width:1170px;}} /*container-fluid for 100%*/.container-fluid {padding-right:15px; padding-left:15px; margin-right:auto; Margin-left: Auto;}

The above content is bootstrap3 in container and container_fluid outer container of the difference explain, hope can help everyone.