上QQ阅读APP看书，第一时间看更新

Container-fluid

Earlier on in this chapter, we noted that there exist two types of containers. In the previous subsection, we covered the first type—container. The second type of container, container-fluid, differs from container in two distinct ways:

It takes up the full width of the viewport, except for 15 pixels padding left and right
It doesn't concern itself with breakpoints

The container-fluid allows the page to be fully responsive to all widths, providing smoother transitions. When responding to breakpoints, container snaps the layout to the appropriate width, while container-fluid progressively alters the layout.

The only difference in the markup is that instead of applying the container class to the container div, the container-fluid class is applied instead. Consider the following code snippet:

<body>
    <div class="container-fluid">
        <h1>Help, I'm trapped in a container!</h1>
    </div>
    <div>
        <h1>I'm free!</h1>
    </div>
</body>

The preceding snippet produces the result illustrated in figure 2.3:

Figure 2.3: Using the container-ﬂuid class (example02.html)

Note that the container element now sits 15 pixels from the edge of the browser. When we use container, the container already has a hard-coded width defined. This width is based on the viewport. For example, at a resolution of 1200 px wide, the container will be 1140 px wide. At a resolution of 1280 pixels, the container will remain at 1170 px wide, because the container only responds to certain breakpoints. When we use container-fluid, the container width is dynamic, because container-fluid responds to every horizontal change and bases the width solely on the padding values from the make-container mixin; container, on the other hand, responds only at specific widths; container-fluid is the approach to take when building a page that needs to work across all display sizes and forms, especially when building mobile-first applications.

The boxed ( .container) class results in jumpy resizing. The wide layout ( .container-fluid) results in continuous resizing. Both are valid even for mobile-first apps.

The container ensures that our contents will always display within a defined area on the page. But what about positioning content within the container? This is where rows come into play.

Box-sizing

In CSS, every element is represented as a rectangle or box. Each box has a number of properties associated with it to define how the element is rendered. This is the CSS Box Model. The box-sizing property of an element defines how the Box Model should calculate the width and height of elements.

The default value for box-sizing in the CSS box model is content-box. The content-box property only includes the content of an element when calculating the size of that element.

Bootstrap 4 defaults the value of box-sizing to the border-box. The border-box property includes the padding and border as well as the content of the element in the calculation of the height and width of the element. Note that the margin is not included in the calculation. The third possible value for box-sizing is padding-box. The padding-box property, as the name suggests, only uses the content and the padding in calculating the size of an element.