为什么底部有滚动条答案

【问题标题】：Why is there a scrollbar at the bottom为什么底部有滚动条
【发布时间】：2016-04-21 12:54:16
【问题描述】：

我正在为某个项目使用 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 class 只是做了一个margin:auto，但这里不应该担心，因为我什至没有在jsfiddle中定义它。

【问题讨论】：

标签： html css zurb-foundation

【解决方案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 网格。

【讨论】：

【解决方案2】：

基于Zurb docs，您必须将第二个.row 嵌套在.columns 中，例如this fiddle forked

【讨论】：

【解决方案3】：

它来自您的外部 css 文件。

原因：

  .row .row {
     margin-left: -.625rem;
     margin-right: -.625rem;
     max-width: none;
   }

把右边的边距去掉试试。

【讨论】：

这是 zurb 基础的正常 css 行为吗？我们无法在不破坏的情况下嵌套 2 行类？
@The0bserver 可以，但是.row 直接子代应该是.column，如果你遵循这个规则，你可以做任何你想做的嵌套

【解决方案4】：

.text-center {
    overflow: hidden !important;
}

使用这个。它正在工作

【讨论】：