css - 在列之间设置空间，因此每列大小相同(使用基础)

Question

我试图在我的列之间留出一些空间，但似乎找不到正确的解决方案。

代码:

<div class="content wrapper">
<div class="row">
    <div class="red window border-right column small-12 medium-3">
        Section 1
    </div>
    <div class="green window border-left border-right column small-12 medium-3">
        Section 2
    </div>
    <div class="blue window border border-left border-right column small-12 medium-3">
        Section 3
    </div>
    <div class="yellow window border-left column small-12 medium-3">
        Section 4
    </div>
</div>
</div>

尝试在列上将类设置为 border-right，border-left，但是，左右列的大小将大于中间的两个(我使用的是 middle-3，所以有 4列)。

图片:

CSS:

.window {
background-color: white;
height: 450px;
}

.window.border-left {
border-left: 8px solid #EAEDEE;
}

.window.border-right {
border-right: 8px solid #EAEDEE;
}

.yellow {
background-color: yellow;
padding: 1rem;
}

.red {
background-color: red;
padding: 1rem;
}

.blue {
background-color: cadetblue;
padding: 1rem;
}

.green {
background-color: green;
padding: 1rem;
}  

如果不全局应用，这可能吗？

Answer 1

请你试试这个，我希望你需要这个。

CSS:

.content.wrapper {
  float: left;
  width: 100%;
}
.row {
  float: left;
  margin: 0;
  width: 100%;
}
.window {
background-color: white;
height: 450px;
}

.window.border-left {
border-left: 8px solid #EAEDEE;
}

.window.border-right {
border-right: 8px solid #EAEDEE;
}

.yellow {
background-color: yellow;
padding: 1rem;
}

.red {
background-color: red;
padding: 1rem;
}

.blue {
background-color: cadetblue;
padding: 1rem;
}

.green {
background-color: green;
padding: 1rem;
}  
.border-right, .border-left {
  float: left;
  width: 25%;
}

参见 Bootply Updeted Demo