Bootstrap 间隔 (Spacing)

1. 选择 Documentation — 选择Utilities — Spacing

 2. margin 和 padding   

    Where property is one of:

• m – for classes that set margin
• p – for classes that set padding

   Where sides is one of:

• t – for classes that set margin-top or padding-top
• b – for classes that set margin-bottom or padding-bottom
• l – for classes that set margin-left or padding-left
• r – for classes that set margin-right or padding-right
• x – for classes that set both *-left and *-right
• y – for classes that set both *-top and *-bottom
• blank – for classes that set a margin or padding on all 4 sides of the element

    Where size is one of:

• 0 – for classes that eliminate the margin or padding by setting it to 0
• 1 – (by default) for classes that set the margin or padding to $spacer * .25
• 2 – (by default) for classes that set the margin or padding to $spacer * .5
• 3 – (by default) for classes that set the margin or padding to $spacer
• 4 – (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 – (by default) for classes that set the margin or padding to $spacer * 3
• auto – for classes that set the margin to auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1<div class="container">

2    <div class="bg-danger  m-5">I am simple div</div>

3    <div class="bg-success m-4">I am simple div</div>

4    <div class="bg-info m-3">I am simple div</div>

5    <div class="bg-warning m-2">I am simple div</div>

6    <div class="bg-primary m-1">I am simple div</div>

7    <div class="bg-secondary m-0">I am simple div</div>

8    <div class="bg-dark text-light m-0">I am simple div</div>

9</div>

10<br>

11<br>

12<br>

13<div class="container">

14    <div class="bg-danger  p-5">I am simple div</div>

15    <div class="bg-success p-4">I am simple div</div>

16    <div class="bg-info p-3">I am simple div</div>

17    <div class="bg-warning p-2">I am simple div</div>

18    <div class="bg-primary p-1">I am simple div</div>

19    <div class="bg-secondary p-0">I am simple div</div>

20    <div class="bg-dark text-light p-0">I am simple div</div>

21</div>

22

23

24<div class="container">

25    <div class="bg-danger  ml-5 ml-md-5">I am simple div</div>

26    <div class="bg-success mt-4 mt-lg-5">I am simple div</div>

27    <div class="bg-info mb-3 mb-sm-5" >I am simple div</div>

28    <div class="bg-warning mr-2">I am simple div</div>

29    <div class="bg-primary m-1">I am simple div</div>

30    <div class="bg-secondary m-0">I am simple div</div>

31    <div class="bg-dark text-light m-0">I am simple div</div>

32</div>

33

 m-5 

 ml-5

 ml-md-5

DIV水平居中

1
2
3
4
1<div class="container">

2    <div class="bg-danger  mx-auto w-25 text-center">I am simple div</div>

3</div>

4

负margin(有负的margin，没有负的padding)  

1
2
3
4
5
6
7
8
9
1<div class="row mx-md-n5 ">

2    <div class="col px-md-5">

3        <div class="p-3 border bg-light">Custom column padding</div>

4    </div>

5    <div class="col px-md-5">

6        <div class="p-3 border bg-light">Custom column padding</div>

7    </div>

8  </div>

9

   mx-n5 mx-md-n5