块网格在Foundation中显示水平滚动条

Question

我刚刚开始学习基础（从以前的凌乱的CSS经验）。我想尝试每行4个col图像的全屏块网格。我有这个使行全宽：

.row
  max-width: 100%

以下是代码：

<nav class='top-bar'>
  <ul class='title-area'>
    <li class='name'>
      <h1>
        <a href='#'>
          My Website
        </a>
      </h1>
    </li>
    <li class='toggle-topbar menu-icon'>
      <a href='#'>
        <span>menu</span>
      </a>
    </li>
  </ul>
  <section class='top-bar-section'></section>
</nav>
<div class='row'>
  <ul class='small-block-grid-2 large-block-grid-4'>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
  </ul>
</div>

我正在烦恼水平滚动条。见下面的截图

我知道这是下面的保证金：

@media only screen
[class*="block-grid-"]
  margin: 0 -0.625em;

但我想覆盖它吗？它感觉不对（看起来像 hack ）。如何正确使用Foundation以全屏显示块网格？这是一个简单的布局要求。

Answer 1

如果您查看解释the Foundation grid they already use the box-sizing: border-box star hack

的文档

由于.row包含block-grid的最大宽度设置为100％，因此屏幕宽度会溢出。通常，网格中的元素将嵌套在.rows中，并定义为max-widths，并且还包含在已定义的列大小中。

当你深深地<强烈>恐惧并且调整边距时，你可以简单地做一些hacky事情：

@media only screen [class*="block-grid-"] margin: 0 2em;

或者您可以将.block-grid包含在容器<div class="large-12 columns">中。

另一半的六分之一我会说。如果您害怕搞乱网格布局，可以在body标签上使用条件类，这样您的自定义block-grid只会影响您想要的页面。

Answer 2

看看这个demo by Paul Irish

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

这可能会有所帮助，否则你能提供一个小提琴吗？

Answer 3

对于那些不想在标准行/列网格中包装块网格的人，只需隐藏块网格父元素上的溢出即可。这是一个多余的代码演示。

(html)
<div class="block-grid-parent">
  <ul class="block-grid">
    ...

(css)
.block-grid-parent {
  overflow: hidden;
}