为什么列不会在基金会6中并排？

Question

当我的屏幕达到1090像素或平板电脑模式时，列不会并排放置（其中一个被向下推，在它们之间创建一个空白区域）。我使用的是带有12列的Foundation 6，但它不适用于中型屏幕。它适用于桌面大小。

.white-no-content {
    background-color: #fff;
    height: 0px;
}

.black-no-content {
    background-color: #000;
    height: 100px;
}

#left-about {
    background-color: #e6e3e3;
    height: 75px;
}

<!-- back white sections -->
<section class="row">
    <article class="columns medium-2 black-no-content">
    </article>
    <article class="columns medium-10 white-no-content">
    </article>
</section>

<!-- about -->
<section class="row">
    <article class="columns medium-2" id="left-about">   
    </article>
    <article class="columns medium-10 text-center">
        <div>
            <a href="#fashion-about">ABOUT</a>
        </div>
    </article>
</section>

Answer 1

我将您的代码复制并粘贴到codepen中并且它可以正常工作（即使在1090px及以上，列也是并排）：https://codepen.io/dgenest/pen/yXLNLq

1. 您是否在网页中加入了基础CSS？

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
   

2. 中画面的默认断点为640px。如果您的屏幕较小，您会看到列堆栈。