Jak dodać przestrzeń między pól treści w Bootstrap

Question

Teraz mam wiersz trzech pól w Bootstrap następująco:

<div class="row"> 
<div class="col-lg-4 pathBoxMain"> 
<h2>Content</h2> 
</div> 

<div class="col-lg-4 pathBoxMain"> 
<h2>Content</h2> 
</div> 

<div class="col-lg-4 pathBoxMain"> 
<h2>Content</h2> 
</div> 
</div> 

gdzie mój zwyczaj CSS zmienia rozmiar skrzynek treści i dodaje obramowanie następująco :

.pathBoxMain { 
border: 5px solid black; 
padding: 10px 0px 0px 0px; 
height: 175px; 
} 

wszystkich pól pojawiają się tuż obok siebie z dotykania granic, a ja staram się dodać trochę przestrzeni pomiędzy skrzynkami, tak aby się nie dzieje. Wszystko, co wypróbowałem (dostosowując szerokość pól, zmieniając marginesy, dodając puste kolumny między już istniejącymi), wszystkie zmieniają wyrównanie pól, aby nie były już centymetrowe w całym wierszu.

Czy istnieje sposób na dodanie spacji między polami zawartości, przy jednoczesnym zachowaniu środkowych odstępów między polami?

Answer 1

.pathBoxMain { 
    border: 5px solid black; 
    margin: 10px 0px 10px 0px; 
    height: 175px; 
} 

Obiekt margines jest chyba to, co szukasz

Answer 2

Korzystając margin: top right bottom left. Zobacz documentation Musisz dodać coś takiego.

margin: 10px 0 10px 0; 

Spowoduje to dodanie 10 pikseli u góry i 10 pikseli u dołu.

.pathBoxMain { 
border: 5px solid black; 
padding: 10px 0px 0px 0px; 
margin: 10px 0 10px 0; 
height: 175px; 
} 

Answer 3

jako ładowania początkowego stosuje box-sizing: border-box The margin nie są zawarte w szerokości col-lg-4. Można jednak przesłonić że szerokość i dodać pewien margines do każdego drugiego elementu w wierszu, jak:

.col-lg-4{ 
    width: 32% !important; 
} 

div:nth-of-type(3n+2){ 
    margin-left: 2%; 
    margin-right: 2%; 
} 

/* (32% width * 3 elements in a row) + 2% margin left and right = 100% width */ 

Bootply