为什么bootstrap在.span上使用浮点数而不是display:inline-block？

Question

我正在修改自定义网格,并想看看其他人是如何创建他们的网格系统的.由于twitter的bootstrap似乎如此受欢迎,我看了它的代码.现在我想知道为什么他们使用花车？我会使用display: inline-block;html元素display: inline;或者display: block;我会尽量避免浮动.但由于某些原因,bootstrap创建者决定使用浮动.首先我认为他们使用它们具有向后兼容性,因为ie6不支持display: inline-block;并且ie7仅支持display: inline;默认情况下的元素.但是ie6或多或少地退出游戏,因为他们使用微清晰黑客,它使用*zoom:1; 目标ie6 + IMO他们可以复制相同display: inline-block;的*display: inline; *zoom: 1;所以最后的问题为什么浮动显示内联块？他们试图解决的问题我上面没有提到过吗？

Answer 1

内联块可识别空白区域,具有实际内容的自动宽度和堆栈,按HTML中的顺序排列.Floats不是但需要clearfix方法并且基于块元素.这些元素在可用空间上水平自动宽度.从语义上讲,内联块的语义较少,因为白空间感知格式和顺序的重要性.但纯粹以功能性的方式看待它,两者都不是为网格而制造的.如果不是伪CSS,我们也会使用非语义HTML标签clearfixe.所以在我看来他们都不是赢家.但是,Flexbox将在未来几年成为强制性的,暂时没有其他选择.

使用内联块:

<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强制"行"(解除任何正常的流项目问题或浮动后浮动)

是否使用一个或另一个是你的目标(和品味)的问题.我必须说我喜欢内联块而不是浮点数,只要你知道两个col宽度或使用相对大小(%).我认为它比使用clearfix的浮点数更直观和可预测,修复"对于如果它被如何使用它而被使用的问题甚至不是问题.只有内联块的白空间意识强迫你使用一些时髦的HTML ,这是一个缺点.

具有讽刺意味的是,桌子完全执行所有这些(甚至是高度和垂直对齐)没有任何问题.由于必须按顺序放置内联块,因此这里有讨论的动机.

如果我们谈论响应,表'丢失'内联块.假设你在桌面上有4个cols,你想在平板电脑上有2个cols,在移动设备上需要1个cols.使用内联块,你只需要给cols其他宽度尺寸,他们希望包装好(在崩溃时注意边距).使用表格,您将被绑定到实际的行,这可能非常顽固.Flexbox需要很长时间才能看起来很漂亮.您可以在某些情况下灵活调整布局.

Bootstrap可以方便地了解他们是如何做的.刚读完3.0,他们正在使用相对网格大小.这给出了嵌套网格和对齐的问题.

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

Col a是普通的父col.Col c是b的子嵌套col.由于排水沟对容器是可变的,因此很难将c与相对尺寸对齐,除非您使用填充和边框模型.但是这样你就失去了很多灵活性.如果你想让col有一些背景和填充,你就搞乱了网格系统,所以你必须使用你设计的容器,这会使代码混乱.我没有研究过他们是否找到了解决方法.我还没有.我去了固定像素,但这意味着在响应式设计中,你只能拥有一些固定的宽度,并且对于移动设备周围的一切都使用相对网格.

Answer 2

在语义网术语中，display: inline-block当我们想要放置块级元素（例如<img>文本行内）时，应该使用 。我们不应该使用内联放置来制作页面的主要布局。元素 withdisplay: inline-block也受父元素的font-sizeand 等属性的影响line-height。这会降低页面布局的准确性。您最好养成在制作页面主布局时使用float而不是使用的习惯。inline-block