如何为我的案例

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