【问题标题】:How to horizontally align-center only for small and medium screens only using Zurb Foundation flex grid如何仅使用 Zurb Foundation flex grid 仅针对中小型屏幕水平居中对齐
【发布时间】:2018-02-16 19:43:40
【问题描述】:

我想align-center 这两列仅适用于medium down 大小的屏幕,而不适用于大屏幕。这曾经适用于 small-centeredmedium-centered,但不适用于 Zurb Foundation's Flex Grid

<div class="row">
  <div class="small-12 large-7 columns">
    <p>A: Left on large, centred otherwise</p>
  </div>
  <div class="small-12 large-5 columns>
    <p>B: Right on large, centred otherwise</p>
  </div>
</div>

我一直在寻找类似align-center-middle 的东西,但似乎找不到任何东西。我可以创建一个自定义类,但如果存在,我更喜欢使用内置选项。

【问题讨论】:

    标签: html css sass flexbox zurb-foundation


    【解决方案1】:

    如果没有人知道使用 Zurb Foundation 内置功能的方法,我将这些帮助类添加到我的项目中:

    .align-center-small {
      @include breakpoint(small only) {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
      }
    }
    
    .align-center-medium {
      @include breakpoint(medium only) {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
      }
    }
    
    .align-center-large {
      @include breakpoint(large only) {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
      }
    }
    

    【讨论】:

    • 这是个好主意(不知道为什么 Foundation 6 没有这个功能,看起来很基础。我能找到的最近的是:foundation.zurb.com/sites/docs/typography-helpers.html - 但只有 .medium-text-center -我需要.small-text-center!)所以我在上面尝试了你的代码并得到'mixin breakpoint not found'错误......这里是否缺少一些代码? (免责声明 - 前端新手在这里)
    猜你喜欢
    • 2013-04-09
    • 1970-01-01
    • 2018-09-21
    • 2010-12-26
    • 1970-01-01
    • 2014-04-20
    • 1970-01-01
    • 2023-03-26
    • 1970-01-01
    相关资源
    最近更新 更多