gpt4 book ai didi

zurb-foundation - ZURB 基础和行折叠

转载 作者:行者123 更新时间:2023-12-04 23:52:25 25 4
gpt4 key购买 nike

我在 ZURB 的论坛上发布了一个问题,但我注意到任何帖子都没有答案。
因为我认为这个问题可能会发生在许多其他人身上,所以我认为把它放在 SO 上也是一个好主意。它来了:

我使用以下标记制作了一个最小的问题示例(使用 CLCS 建议编辑):

<body>
<div class="row collapse test">
<div class="large-4 columns">
<p>Test 1</p>
</div>
<div class="large-4 columns">
<p>Test 2</p>
</div>
<div class="large-4 columns">
<p>Test 3</p>
</div>
</div>
</body>

所有 CSS 类都是 ZURB Foundation 未触及的类。唯一的添加是针对 test-table 类,其唯一目的只是为了获得问题的视觉帮助(为了清晰起见也进行了编辑):
.test div {
border: 1px solid red;
}

预期的输出将是 3 列完美地相互接触。实际输出是两列像预期的那样相互接触,但第三列在右侧稍微偏移,在中心和右侧之间留有空白(参见附图,也进行了编辑,但问题仍然存在)。

[编辑]似乎其他一些用户在相同的环境(Safari 7、Zurb Rails Gem 5.0.2.0)下也面临同样的问题[/编辑]

enter image description here

最佳答案

这是其他人在上面指出的舍入问题以及 Foundation 放置 float: right; 的事实的组合。在行的最后一列。这就是为什么您会看到最后一列和中间一列之间的差距。

要消除间隙,您可以添加 end类到每一列。

在“不完整的行”下查看 Foundation 的文档
http://foundation.zurb.com/docs/components/grid.html#incomplete-rows

关于zurb-foundation - ZURB 基础和行折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20970347/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com