html - 为什么底部有一个滚动条

Question

我正在为某个元素尝试使用 Zurb Foundation，并且在我的页面中我使用了它。

 <div class="row text-center">
    <h3>Laurem Ipsom Dolor</h3>
    <div class="row">
        <div class="small-4 small-offset-2 columns">
        <img src="some.svg"  class="thumbnail centered">
        <h3>Laurem Ipsom Dolor</h3>
        </div>
        <div class="small-4 end columns">
        <img src="another.svg" class="thumbnail centered">
        <h3>Laurem Ipsom Dolor</h3>
        </div>
    </div>
</div>

这是一个工作示例:https://jsfiddle.net/f7kb9x6n/

那么为什么中小屏幕尺寸的底部有一个滚动条(为什么它超过页面宽度)(例如jsfiddle窗口，通常是屏幕的四分之一)

centered 类只做了一个 margin:auto，但这里不应该关心，因为我什至还没有在 jsfiddle 中定义它。

Answer 1

您不应该将 .row 嵌套在另一个 .row 中，.row 的直接子级应该是 .column (或 .columns，无论您使用什么)，此标记应该适合您的情况:

 <div class="row text-center">
     <div class="column">
          <h3>Laurem Ipsom Dolor</h3>
          <div class="row">
              <div class="small-4 small-offset-2 columns">
              <img src="some.svg"  class="thumbnail centered">
              <h3>Laurem Ipsom Dolor</h3>
              </div>
              <div class="small-4 end columns">
              <img src="another.svg" class="thumbnail centered">
              <h3>Laurem Ipsom Dolor</h3>
              </div>
          </div>
      </div>

要回答为什么会发生这种情况，是因为 .row 应用负边距来补偿列间距(列之间的间距)。请不要编辑 .row .row 的 CSS 规则，您会弄乱 Foundation 网格。