在我的情况下如何为元素设置边距

Question

我正在尝试为我的应用创建响应视图。

目前我有两列

左边的应该是灵活的，取决于浏览器的宽度，右边的宽度设置为 120px。

html

<div class="wrapper row">
    <div class="left col-xs-9">
        This is the left column
    </div>
     <div class="right col-xs-3">
         Right column
     </div>
</div>

CSS

.wrapper {
    background-color: blue;
    color: #fff;
}
.left {
    margin-right:20px;
    background-color: red;
}
.right {
    width: 120px;
    background-color: green;
}

问题是无论浏览器宽度是多少，我都需要在这两列之间留出 20px 的边距，而右边的则保持 120px 的宽度。我该怎么做呢？谢谢。

http://jsfiddle.net/4ufk1xxc/2/

Answer 1

将包装器更改为 flexbox 即可解决问题：

.wrapper {
  display: flex;
}

Updated Fiddle