html - 为什么列不会在 Foundation 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 中并且它有效(即使在 1090 像素及以上时，这些列也是并排的):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. 中等屏幕的默认断点是 640 像素。如果您的屏幕较小，您会看到列堆叠。