Home  >  Article  >  Backend Development  >  An explanation of the difference between container and container_fluid outer container in bootstrap3

An explanation of the difference between container and container_fluid outer container in bootstrap3

小云云
小云云Original
2017-12-05 13:09:241559browse

.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

Bootstrap3-New Features

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn