[ Bootstrap] Ajouter un espace entre 2 div

**FCL31** · 08/05/2018, 14h16

Bonjour.

J'ai un petit soucis surement tout bête

J'utilise bootstrap.

J'ai une div en col-md-8 et une autre en col-md-4.

Toutefois, je n'ai pas d'espace entre les 2 div et j'aimerais en avoir une d'environ 5-10px.

Mais je n'y arrive pas. si j'ajoute une marge, la seconde div passe en dessous.

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
    <body>        <div class="container-fluid">
            <div class="row titre">
                .......
            </div>
            <div class="row">
                .......
            </div> <!-- row -->
            <div class="row">
 
 
                <div id="creaFamille" class="col-md-8 section">
                    <form class="form-inline">
                        ......
                    </form> <!-- form -->
                </div> <!-- col-md-8 -->            
 
                <div id="equ_cal" class="col-md-4">
                    <div class="row section">
                        <label class="lbl">Equipe</label>
                            .....
                         </form>
                        <ul id="lstCollab">
    <!--                     li ajoutées en jQuery -->
                        </ul>
                    </div>
                    <div class="row section">
                        ...
                    </div>
                </div> <!-- col-md-4 -->
 
 
            </div> <!-- row -->
        </div> <!-- container -->
    </body>

CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
body{    padding: 10px 0;
    margin: 0 50px;
}
 
.titre{
    background-color: rgb(117, 173, 56);
    padding: 10px 0;
    border-radius: 10px;
}
 
.titre > input{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: rgb(117, 173, 56);
    border: none;
    color: black;
    font-weight: bold;
    font-size: 25px;
    width: 80%;
}
 
.titre > input:focus {
     outline:  none;
}
 
.fa-cogs{
    display: block;
    float: left;
    color: #ccc;
    font-size: 35px;
    margin-left: 15px;
}
 
.section{
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgb(0, 75, 133);
    padding: 10px 0;
    border-radius: 10px;
}
 
.lbl{
    margin-left: 50px;
    color: white;
}
 
.glyphicon-ok-circle, .glyphicon-plus-sign{
    color: white;
    font-size: 40px;
}
 
.glyphicon-plus-sign{
    margin-left: 20px;
}
 
#valid{
    display: block;
    float: right;
    margin-right: 20px;
}
 
input{
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
}
 
#inputFamille{
    margin-left: 20px;
}
 
#temps{
    width: 50px;
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
    background-color: yellow;
    margin-left: 20px;
}
 
.glyphicon-folder-open{
    color: white;
    margin-left: 10px;
}
 
#equ_cal{
    padding-left:10px;
/*     height: 100px; */
}
 
#selCollab, #lstCollab{
    margin-left: 10%;
}
 
#lstCollab{
    list-style:none;
}
 
#lstCollab > li{
    margin-top: 5px; }

Une idée de comment ajouter un espace (marge left/right) entre mes 2 col SVP ??

Merci d'avance.

++

**psychadelic** · 08/05/2018, 22h52

Le systeme de grid de Bootstrap est conçu ainsi, sans espace entre les Div.
la largeur est divisée en 12eme, si tu rajoute une marge sur une div, alors elle dépasse du nombre de 12emes que tu lui choisi, et les div suivantes n'ont plus la place (et se retrouvent renvoyée à la ligne suivante.

si tu veux avoir un visuel d'espacement entre tes colonnes et en utilisant le grid de Bootstrap, alors tu doit insérer une nouvelle div à l'intérieur et jouer soir sur le padding calculé par bootstrap soit jouer avec les marges de ton nouveau div, quitte à lui mettre des marges négatives.

**NoSmoking** · 09/05/2018, 08h57

Bonjour,
on ne sait pas quelle version de BootStrap tu utilises.

Si tu utilises la version 4.x alors tu tirerais avantage à utiliser le Utilities Spacing.

PS : tu en es où dans cette discussion : Dupliquer une div dans une autre ?

[ Bootstrap] Ajouter un espace entre 2 div

Framework CSS Bootstrap

Discussions similaires

Partager

Partager