Css 在Zurb基金会中只设置小的属性，让中、大列成为其内容的大小。

我一直在尝试创建一个菜单，其中所有菜单项在大窗口和中等窗口大小上采用文本长度，但在窗口较小时采用12列。我使用Zurb基金会作为标题。 下面是使用slim的代码的有趣部分。请注意为对象提供float:right css属性的正确类

a.menu-item-right.column.right.small-12.medium-1 href="#" LINKLlaksdlkasdja
a.menu-item-right.column.right.small-12.medium-1 href="#" LINKLlaksdlkasdja
a.menu-item-right.column.right.small-12.medium-1 href="#" LINKLlaksdlkasdja
a.menu-item-right.column.tight.small-12.medium-1 href="#" LINKLlaksdlkasdja

或

如果你愿意的话

遗憾的是（现在），在没有其他规定的情况下，将小行为延续到更大的行为是基金会的一个特征。指定medium-1使所有按钮堆栈都像预期的那样奇怪

您将如何干净地实现这一点

---

谢谢，

也许，您可以简单地使用

中位

---

我终于自己找到了它，如果它能帮助别人，我就把它贴在这里。最后很容易。 答复:

---

嗨，非常感谢你，几乎就是这样！我已经更新了问题；碰巧我想让元素向右浮动。这最后一条信息打破了你的解决方案。非常感谢你，你让我从Other的角度思考这个问题。这是我的答案：使用

和

• <a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
  <a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
  <a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
  <a class="menu-item-right column right small-12 medium-1" href="#">LINKLlaksdlkasdja</a>
  

  <div class="wrapper row">
  <a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
  <a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
  <a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
  <a class="menu-item-right column small-12 medium-centered " href="#">LINKLlaksdlkasdja</a>
  </div>
  

  .wrapper{
      text-align: right;
  }
  

      nav class="top-bar" data-topbar="data-topbar"
        ul.title-area
          li.name
          li.toggle-topbar.menu-icon
            a href="#"
              span Menu
        section.top-bar-section
          ul.right
            li
              a href="#" Artists
            li
              a href="#" Symposiums
            li
              a href="#" Galeries
            li
              a href="#" Mon Portail