仅在响应式网格中的两个按钮之间留有边距（jquery 移动设备）

Question

我只想在 jquery 移动设备中使用响应式网格在两个按钮之间设置一个 space，我不想在按钮的左侧和右侧留有边距。我不知道如何。

This jsfiddle 显示了我想要的内容：当有水平 space 时，左侧有一个按钮，右侧有另一个按钮，还有一个 space在中间。左按钮的左侧没有边距，右按钮的右侧也没有边距：完美！正是我想要的。

我是这样实现的：

.ui-grid-a [class*=ui-block-a]>.ui-btn { margin:0 10px 0 0; }
.ui-grid-a [class*=ui-block-b]>.ui-btn { margin:0 0 0 10px; }

但是...当我们挤压水平 space 使其响应时，我将在第一个按钮的正确大小中有一个 space，在第一个按钮中有一个 space第二个按钮的左边（当然是css的左右边距）：

问题是：如何在按钮之间设置 space（如第一张图片）而不在响应时设置 space（第二张图片中的问题）？在两个按钮之间使用某种 'spacer' ？另一个 div？我真的尝试了很多东西...

Answer 1

使用这个CSS:

@media (max-width:800px) {
  .ui-grid-a [class*=ui-block-]>.ui-btn {
    margin: 0;
  }
}

Fiddle: http://jsfiddle.net/yu4pem1g/3/