如何在引导程序3中使4个矩形框适合屏幕？

Question

我有一个设计（在桌面视图上），如下图所示，我试图在Bootstrap 3中复制。在设计中，4个框位于中心，左右两侧有一些间距（我假设我必须在我的CSS中放置margin-left和margin-right以获得该间距）。悬停时，每个框背景颜色为＃F4F4F4。

目前，这是我在fiddle上所做的。在其中，每个盒子（例如：后端，前端等）覆盖屏幕尺寸的50％，因为我正在使用col-lg-6类

在小提琴中，我可以看到左边距和边距右边但由于某些原因我无法在我的电脑上看到它（边距左边和边距右边）。我用来制作网页的工具是Brackets。

我很想知道，我怎样才能将盒子放在设计中心，左右两侧有一些间距，悬停在盒子上。另外，我是否需要使用其他Bootstrap类来完成它？

我使用的CSS代码是：

#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

我不确定，这是你要找的......

尝试根据您对所有分区的要求将col-lg-6更改为col-lg-5 / col-lg-4，然后添加col-lg-offset-1 / col-lg-offset-2对于前面空间行中的第一个项目。