content
Bootstrap has three types of containers
.container-sm .container-md .container-lg 演练
.container-xl .container-xxl walkthrough
Sass Mapping - Modifying Predefined Container Classes
Visualizing Large Screen Design - General Catalog
Guide: For large-screen cases, refer to YYDatav's large-screen data visualization "Summary of Wonderful Cases" (Python & Echarts source code) - YYDataV's blog - CSDN Blog
Container Container is the most basic layout element in Bootstrap. Containers can be nested, but most layouts do not require nested containers.
Bootstrap has three types of containers
.container that sets a maximum width at each responsive breakpoint.
.container-fluid, at all breakpoints the width is: 100%.
.container-{ breakpoint } , with a width of 100% until the specified breakpoint.
The table below shows how .container compares to .container- .container-fluid 以及{ breakpoint } 宽度width.
actual combat
The display resolution is 1920*1080
This resolution belongs to the Large >= 992px series, so the display effect is:
.container walkthrough
code
<body>
<div class="container" style="border:3px solid blue">
hello
</div>
</body>
renderings
You can see that there is white space on the left and right sides of the div layout.
.container-fluid walkthrough
code
<body>
<div class="container-fluid" style="border:3px solid blue">
hello
</div>
</body>renderings
You can see that the div layout occupies 100% of the viewport.
.container-sm .container-md .container-lg 演练
code
<body>
<div class="container-sm" style="border:3px solid blue">
hello
</div>
</body>
renderings
You can see that there is white space on the left and right sides of the div layout. Same effect as .container
.container-xl .container-xxl walkthrough
code
<body>
<div class="container-xl" style="border:3px solid blue">
hello
</div>
</body>renderings
You can see that the div layout occupies 100% of the viewport. Same effect as .container-fluid
Sass Mapping - Modifying Predefined Container Classes
As shown above, Bootstrap generates a series of predefined container classes to help you build the desired layout. You can customize these predefined container classes by modifying the Sass mapping (found in variables.scss):
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);Visualizing Large Screen Design - General Catalog