为什么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优先于中偏移应用的边距 -

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

如果我专门针对说出id或.named_div＆gt;的按钮？一个 ，结果会增加一个空格，但整个事物并不完全居中。

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。

Answer 2

您的班级<div class="row column text-center">适用于网格上列宽为12的行...因此网格宽度已经​​达到最大值。我通过从锚点中分割标题行并将锚点指定为具有未定义列宽的行中的列并在小提琴中尝试来更改您的示例。将它们分散到中等宽度的边界：

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