如何使用Zurb Foundation做50％/ 50％移动列和固定间距桌面列？

Question

这可能是典型的选择面板，位于桌面上：

并在手机上：

Zurb Foundation可以这样做吗？我认为一个问题是，对于中等宽度和向上，2列的宽度应该是固定的，而不是动态的。 （选择2可以具有较长的宽度或较短的宽度，因为背景是透明的并且不会显示。重要的是选择1，垂直分隔线和选择2之间的固定间距。）

我在CodePen上添加了一些所需的行为，虽然它们是针对桌面和移动设备定制的，但不能同时存在：

桌面：http://codepen.io/anon/pen/oxZpzg
手机：http://codepen.io/anon/pen/KzWZwQ

移动设备：

<div class="row text-center">
  <div class="small-6 column">Choice 1</div>
  <div class="small-6 column">Choice 2</div>
</div>

并且似乎无法为桌面的固定间距设置样式。

现在，我可以使用纯CSS格式化桌面版本，然后使用媒体查询来设置移动版本的样式，并且不使用Zurb Foundation。 Foundation可用于移动和桌面，还是将Foundation用于一个案例，并将媒体查询用于另一个案例？

Answer 1

只需在SCSS中编写，将其编译为CSS并使用纯CSS。这个SCSS代码可以解决这个问题：

.column {
  background: #ffc;
  color: #333;
  padding: 20px;

  @media #{$small-only} {
    width: 50%;
  }

  &:first-child {
    border-right: 1px solid #bbb;

    @media #{$medium-up} {
      width: 200px;
    }
  }

  &:last-child {
    @media #{$medium-up} {
      width: calc(100% - 200px);
    }
  }
}

编译CSS：

body {
  padding-top: 50px;
}

.column {
  background: #ffc;
  color: #333;
  padding: 20px;
}

@media only screen and (max-width: 40em) {
  .column {
    width: 50%;
  }
}

.column:first-child {
  border-right: 1px solid #bbb;
}

@media only screen and (min-width: 40.0625em) {
  .column:first-child {
    width: 200px;
  }
}

@media only screen and (min-width: 40.0625em) {
  .column:last-child {
    width: calc(100% - 200px);
  }
}

更新了HTML：

<div class="row text-center">
  <div class="column">Choice 1</div>
  <div class="column">Choice 2</div>
</div>

CodePen link