css - Block grid shows horizontal scroll bar in Foundation

Question

I am just starting to learn Foundation (from previous messy css experience). I am trying to do a full screen block grid of 4 col images per row. I have this to make the row full width:

.row
  max-width: 100%

Here is the code:

<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>

I am getting annoying horizontal scroll bar. See below screenshot

I know it is the margin below:

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

But do I suppose to override it? It doesn't feel right (seem like a hack). How do I use Foundation properly to display block grid with full screen? It's a simple layout requirement.

Answer 1

如果您查看解释Foundation 网格的文档，他们已经使用了box-sizing: border-boxstar hack

由于.row包含您block-grid的设置最大宽度为 100%，因此它超出了屏幕宽度。通常，网格中的元素将嵌套在.rows定义的列大小中max-widths，也包含在定义的列大小内。

当您深感恐惧并调整边距时，您可以简单地做些骇人听闻的事情：

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

或者你可以只.block-grid用一个容器来装你<div class="large-12 columns">。

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

Answer 2

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

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

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

Answer 3

看看Paul Irish 的这个演示

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

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