为什么列不会在Foundation 6中并排放置？

当我的屏幕进入1090像素或平板模式时，这些列不会并排坐在一起（其中一个按下，在两者之间创建一个空白区域）。我使用12列的Foundation 6，但它不适用于中型屏幕。一旦桌面尺寸很大，它就可以工作。为什么列不会在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>

来源

2017-06-01 Amyra Reyes

阅读网格上的文档。我认为你没有正确使用它。 http://foundation.zurb.com/sites/docs/grid.html。请记住，列继承了 – Eric

将拼写，样式和格式化代码改进了片段。 – montrealist

我复制并粘贴您的代码放到一个codepen和它的作品（列甚至在1090px及以上的并排侧）：https://codepen.io/dgenest/pen/yXLNLq

有你在页面中包含基础CSS？

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

中等屏幕的默认断点是640px。如果你的屏幕较小，你会看到列堆栈。

来源

2017-06-02 17:00:12 genestd

为什么列不会在Foundation 6中并排放置？

回答

相关问题