Affecting the spacing between elements can be achieved through the margin or padding attributes of the style, but the two attributes have different meanings; margin affects the distance between this element and adjacent external elements, which is referred to as the outer margin here; padding The distance between the affected element itself and its internal child elements, referred to as inner padding for short.
bootstrap4A shorthand class name is provided, 名称分别以m-开头和p-开头的类.
1. The values that affect the distance are
0, 1, 2, 3, 4, 5, auto
(1), and the margin value is
| class name | equivalent style |
|---|---|
| m-0 | Equivalent to {margin:0 !important} |
| m-1 | Equivalent to {margin:0.25rem !important} |
| m-2 | Equivalent to {margin:0.5rem !important} |
| m-3 | Equivalent to {margin: 1rem !important} |
| m-4 | Equivalent to {margin:1.5rem !important} |
| m-5 | Equivalent to {margin:3rem !important} |
| m-auto | Equivalent to {margin:auto !important} |
(2), the padding value has
| class name | equivalent style |
|---|---|
| p-0 | Equivalent to {padding:0 !important} |
| p-1 | Equivalent to {padding:0.25rem !important} |
| p-2 | Equivalent to {padding:0.5rem !important} |
| p-3 | Equivalent to {padding: 1rem !important} |
| p-4 | Equivalent to {padding:1.5rem !important} |
| p-5 | Equivalent to {padding:3rem !important} |
| p-auto | Equivalent to {padding:auto !important} |
2. Adjust the margin on one side
There are several abbreviations, t, b, l, r, x, y mean top, bottom, left, right, left and right, top and bottom (1)
example margin, the distance can be 0-5 and auto, here only Use a value in the period to illustrate the meaning
| class name | equivalent style |
|---|---|
| mt-2 | {margin-top: 0.5rem !important} |
| mb-2 | {margin-bottom: 0.5rem !important} |
| ml-2 | {margin-left: 0.5rem !important} |
| mr-2 | {margin-right: 0.5rem !important} |
| mx-2 | {margin-right: 0.5rem !important;margin-left: 0.5rem !important} |
| my-2 | {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important} |
(2) padding example
| class name | equivalent style |
|---|---|
| pt-2 | {padding-top: 0.5rem !important} |
| pb-2 | {padding-bottom: 0.5rem !important} |
| pl-2 | {padding-left: 0.5rem !important} |
| pr-2 | {padding-right: 0.5rem !important} |
| px-2 | {padding-right: 0.5rem !important;margin-left: 0.5rem !important} |
| py-2 | {padding-top: 0.5rem !important;margin-bottom: 0.5rem !important} |
The difference between Bootstrap4 and Bootstrap3
- The float layout used by Bootsrap3, and the flex layout used by Bootstrap
- The grid system in Bootstrap4 does not need to add the specified number of columns. For example, if there are 2 cols in the row, the row will be divided evenly in any size.
- Bootstrap3 has only 4 grid types (col-xs extra small, col-sm small, col-md, medium col-lg large)
- Bootstrap4 has 5 grid classes, (col-extra small, col-sm-small, col-md-medium, col-lg-large, col-xl-extra large)
- Bootstrap4 uses rem as the unit
- Bootstrap4 passes offset-sm-4 when setting the column offset, while Bootstrap3 passes col-sm-offset-4
- Bootstrap4 adds responsive containers such as container-sm, container-md..., which will occupy the entire screen when the screen size is smaller than the grid class
Note: Bootstrap4 cannot use the class
in Bootstrap3 hidden-xs. If you want to hide under a certain size in Bootstrap4, you should refer to the following tablevisible-xs
| Bootstrap3 | Bootstrap4 |
|---|---|
| hidden-xs | d-sm-block |
| hidden-sm | d-sm-none d-md-block |
| hidden-md | d-md-none d-lg-block |
| hidden-lg | d-lg-none d-xl-block |
| hidden-xl | d-xl-none |
| visible-xs | d-sm-none |
| visible-sm | d-sm-block d-md-none |
| visible-md | d-md-block d-lg-none |
| visible-lg | d-lg-block d-xl-none |
| visible-xl | d-xl-block |
It is worth mentioning that using hidden-sm in B3 will only hide under the sm size, while other sizes will be displayed normally. In B4, if you simply specify d-sm-none, the element will be hidden under the sm size, but sm The above size will also be hidden, and the size below sm will be displayed normally, which involves the issue of upward compatibility, so you have to set the md size display when setting the sm element to hide, as in the above table, and so on to hide upward
compatibility , showing backward compatibility
原文链接：https://blog.csdn.net/weixin_45143481/article/details/104679784
原文链接：https://blog.csdn.net/weixin_39987434/article/details/97111457