html - 为什么 medium-offset-2 值不适用

Question

我正在使用 zurb 的基础构建我的网站，并且我在标注中有两个操作按钮。

现在我想在两个按钮之间留出一些空间以适应平板电脑大小的屏幕，所以我使用了中等偏移量作为类。

<div class="callout large">
    <div class="row column text-center">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <a href="#" class="button medium-2">Some Button</a>
        <a href="#" class="button medium-2 medium-offset-2 hollow">Another Button</a>
    </div>
</div>

但最终结果只是两个按钮之间有正常的间距，我不明白为什么 .button 的 css 比 medium-offset- 应用的边距具有更高的优先级

这是 jsfiddle 中的一个工作示例，它具有相同的问题。我还尝试重新安排按钮的位置和 html 中的中等偏移位置，看看是否有影响，但没有骰子。 https://jsfiddle.net/u356n5cs/

如果我专门针对带有 id 或 .named_div 的按钮 > a，结果添加了一个空格，但是整个东西并没有完全居中。

Answer 1

看起来您的 medium-offset-2 类的边距被显式覆盖了:

快速浏览一下，应用于同一元素的 .button 类似乎是责任方:

您可以通过定义自己的自定义样式来强制将边距应用于按钮，如下所示，以确保它被正确应用:

@media screen and (min-width: 40em){
  .button.medium-offset-2 {
    margin-left: 16.66667%;
  }
}

您可以 see an example of this here .