为什么底部有滚动条
Why is there a scrollbar at the bottom
我正在为某个项目试验 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 window 通常是四分之一屏幕)
centered class 只是做一个 margin:auto,但在这里不应该担心,因为我什至没有在 jsfiddle 中定义它。
它来自您的外部 css 文件。
原因:
.row .row {
margin-left: -.625rem;
margin-right: -.625rem;
max-width: none;
}
去掉margin right试试
基于Zurb docs you have to nest the second .row
inside a .columns
like in this fiddle forked
你不应该将 .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 规则,你会弄乱基金会网格。
.text-center {
overflow: hidden !important;
}
用这个。有效
我正在为某个项目试验 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 window 通常是四分之一屏幕)
centered class 只是做一个 margin:auto,但在这里不应该担心,因为我什至没有在 jsfiddle 中定义它。
它来自您的外部 css 文件。
原因:
.row .row {
margin-left: -.625rem;
margin-right: -.625rem;
max-width: none;
}
去掉margin right试试
基于Zurb docs you have to nest the second .row
inside a .columns
like in this fiddle forked
你不应该将 .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 规则,你会弄乱基金会网格。
.text-center {
overflow: hidden !important;
}
用这个。有效