Question

我正在尝试Zurb基金会的某个项目，而我的页面则使用了这个。

 <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窗口，通常是屏幕的四分之一）

居中的类只是做一个余量：自动，但不应该关注这里，因为我甚至没有在jsfiddle中定义它。

Answer 1

根据Zurb docs，您必须将第二个.row嵌套在.columns内this fiddle forked

Answer 2

你不应该将.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规则，否则你将搞乱基础网格。

Answer 3

来自您的外部css文件。

原因：

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

删除边距并尝试。

Answer 4

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

使用它。它的工作

为什么底部有滚动条

4 个答案: