gpt4 book ai didi

twitter-bootstrap - 为什么 bootstrap 在 .span 上使用 float 而不是显示 : inline-block?

转载 作者:技术小花猫 更新时间:2023-10-29 10:20:24 28 4
gpt4 key购买 nike

我正在修补自定义网格,想看看其他人是如何创建他们的网格系统的。因为 twitter 的 bootstrap 似乎很受欢迎,所以我查看了它的代码。现在我想知道他们为什么使用 float ?我会使用display: inline-block; html 元素有display: inline;display: block; 我会尽量避免 float 。但出于某种原因,bootstrap 的创建者决定使用 float 。首先,我认为他们使用它们是为了向后兼容,因为 ie6 不支持 display: inline-block; 并且 ie7 默认只支持 display: inline; 的元素.但是 ie6 或多或少地退出了游戏,因为他们使用 micro clearfix hack它使用 *zoom: 1;为了针对 ie6+ IMO,他们可以使用 *display: inline; 复制相同的 display: inline-block; *zoom: 1; 所以最后一个问题是为什么 float 在显示内联 block 上?他们是否有任何我在上面没有提到的试图解决的问题?

最佳答案

内联 block 是空白感知的,具有实际内容的自动宽度,并按照它们在 HTML 中的顺序堆叠。 float 不是,但需要一个 clearfix 方法并且基于 block 元素。这些元素在水平可用空间上具有自动宽度。纯粹语义上,内联 block 的语义较少,因为空白感知格式和顺序的重要性。但纯粹从功能的 Angular 来看,两者都不是为网格而设计的。如果不是伪 CSS,我们也会有非语义的 HTML 标签 clearfixe。所以我认为他们都不是赢家。但在未来几年 flexbox 将成为强制性要求时,暂时没有其他选择。

使用内联 block :

<div>
<div style="display:inline-block; width:30%;">col1
</div><div style="display:inline-block; width:70%;">col2</div>
</div>

标签必须粘在一起/附加,以消除任何间距。容器 div 是强制元素成为单独行的一部分所必需的。

有花车:

<div class="clearfix">
<div style="float:left; width:30%;">col1</div>
<div style="float:left; width:70%;">col2</div>
</div>

Clearfix 是强制“行”所必需的(消除任何正常的流程元素问题或 float 之后的 float )

使用其中一种取决于您的目标(和品味)。我必须说我更喜欢行内 block 而不是 float ,只要您知道两个列的宽度或使用相对大小 (%)。我认为它比带有 clearfix 的 float 更直观和可预测,如果按照它应该如何使用它甚至不是问题的问题的修复“。只有内联 block 的空白意识迫使你使用一些时髦的 html ,这是一个缺点。

具有讽刺意味的是,表格完全可以做到这一切(甚至列高和垂直对齐),没有任何问题。由于行内 block 必须按顺序放置,因此有讨论的动机。

如果我们谈论的是响应式,则表格“丢失”了内联 block 。假设您在台式机上有 4 个列,您希望平板电脑上有 2 个列,手机上有 1 个列。使用内联 block ,您“只需”为列提供其他宽度尺寸,并且它们有望很好地包裹(在折叠时注意边距)。使用表格,您将绑定(bind)到实际的行,这可能非常顽固。 Flexbox 被长期需要,看起来很漂亮。您可以根据特定情况灵活调整布局。

Bootstrap 可以很方便地了解他们是如何做某事的。刚读到 3.0,他们正在使用相对网格大小。这给嵌套网格和对齐带来了问题。

----  --a-  ----  ----
---b------
.... ..c.

A 列是一个普通的父列。 Col c 是 b 的子嵌套 col。很难将 c 与 a 与相对大小对齐,因为装订线对于容器是可变的,除非您使用填充和边框模型。但那样你会失去很多灵 active 。当您希望 col 具有一些背景和填充时,您会搞乱网格系统,因此您必须使用您设置样式的容器,这会使代码困惑。我还没有研究他们是否找到了解决方案。我还没有。我使用了固定像素,但这意味着在响应式设计中你只能有几个固定宽度,并且对于移动设备周围的所有内容都使用相对网格。

关于twitter-bootstrap - 为什么 bootstrap 在 .span 上使用 float 而不是显示 : inline-block?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14127150/

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