Home > Others

The difference between container and Container_fluid container in BOOTSTRAP3

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Container and. Container_fluid are two different types of outer packagings in bootstrap, according to the official opinion, the difference is:

The. Container class is used for containers that are fixed-width and support a responsive layout.

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

At first, I thought the so-called fixed width is the developer can set the container to a fixed width, so I used the following layout style:

<body>

    <div class= "container" style= "width:800px" >

        <div class= "col-md-6" >

            <p> Official explanation container container for fixed width and adaptive layout, I now apply the container class div to the outer layer to set a fixed width of 800px to test whether it can achieve adaptive </p>

        </div>

        <div class= "col-md-6" >
            
        </div>

    </div>



</body>

When I did that, I found that the content was no longer adaptive when I narrowed down the width of the browser to a value less than 800px, so I pulled up the debugger and saw the definition of bootstrap.css. Container:

. container{
    padding-right:15px;
    padding-left:15px;
    Margin-right:auto;
    Margin-left:auto
}

@media (min-width:768px) {
    . container{
        width:750px
    }

}

@media ( min-width:992px) {
    . container{
        width:970px
    }

}

@media (min-width:1200px) {
    . container{
        width:1170px
    }

}

I suddenly understand that the so-called fixed width is not to allow developers to set the width of the container, but bootstrap internal based on the screen width of the media query to help us set a fixed width, and can be adaptive.

So, in any case, do not manually set a fixed-width value for the outer-layout container in the response layout.

So, Container-fluid, what is it?

According to the test,. Container-fluid is automatically set to 100% of the outer window, and if the outer window is body, it will display in full screen, regardless of screen size, and automatically implement a responsive layout.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More