css - 如何使 4 个矩形框适合 bootstrap 3 中的屏幕？

Question

我有一个设计(在桌面 View 中)，如下所示，我试图在 Bootstrap 3 中复制它。在设计中，4 个盒子被放置在中间，左右有一些间距(我假设我必须在我的 CSS 中放置 margin-left 和 margin-right 以获得该间距)。悬停时，每个框的背景颜色都是#F4F4F4。

此刻，这是我在fiddle上做的.在其中，每个框(例如:后端、前端等)都覆盖了屏幕尺寸的 50%，因为我使用的是 col-lg-6 类

在 fiddle 中，我可以看到 margin-left 和 margin-right 但由于某些原因我在我的计算机上看不到它(margin-left 和 margin-right)。我用来制作网页的工具是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对于前面空间的行中的第一个元素。