Wie werden 4 Rechteck-Boxen in Bootstrap 3 auf den Bildschirm angepasst?

Question

Ich habe ein Design (es auf der Desktop-Ansicht) wie unten gezeigt, die ich versuche, in Bootstrap 3 zu replizieren. In der Gestaltung sind die 4 Boxen in der Mitte mit etwas Abstand links und rechts platziert (ich nehme an muss in meinem CSS Rand links und Rand rechts setzen, um diesen Abstand zu erhalten). Beim Schweben ist jede Feldhintergrundfarbe # F4F4F4.

In diesem Moment habe ich das unter fiddle gemacht. Jede Box (zB: Back-End, Front-End, etc.) bedeckt 50% der Bildschirmgröße, da ich col-lg-6 Klasse

In der Geige, kann ich Marge-links sehen und Rand rechts, aber aus einigen Gründen kann ich es nicht sehen (Rand links und Rand rechts) auf meinem Computer. Das Werkzeug, das ich verwende, um eine Webseite zu erstellen, ist Brackets.

Ich frage mich, wie ich die Boxen in der Mitte genau im Design mit etwas Abstand links und rechts mit Hover auf Boxen bringen kann. Muss ich auch eine andere Bootstrap-Klasse verwenden, um es zu erledigen?

Der CSS-Code, die ich benutze ist:

#front-end:hover { 
    background-color: #F4F4F4; 
} 

#back-end:hover { 
    background-color: #F4F4F4; 
} 

#graphics-designer:hover { 
    background-color: #F4F4F4; 
} 

#sales:hover { 
    background-color: #F4F4F4; 
} 

#back-end h3 { 
    color: blue 
} 

#front-end h3 { 
    color: blue 
} 

#graphics-designer h3 { 
    color: blue 
} 

#sales h3 { 
    color: blue 
} 

.job-openings #back-end { 
    text-align: center; 
} 

.job-openings #front-end { 
    text-align: center; 
} 

.job-openings #graphics-designer { 
    text-align: center; 
} 

.job-openings #sales { 
    text-align: center; 
} 

.job-openings h2 { 
    text-align: center; 
    padding-top: 50px; 
    font-size: 2.8rem; 
    color: #444444; 
} 

.job-openings .container { 
    padding-top: 50px; 
    padding-bottom: 50px; 
} 

Answer 1

Ich bin nicht sicher, das ist, was Sie suchen ..

versuchen die col-lg-6 an sich ändernde col-lg -5/col-lg-4 gemäß Ihrer Anforderung für alle Divisionen und fügen Sie dann die col-lg-offset-1/col-lg-offset-2 für das erste Element in der Zeile für den Raum in der Front.