为什么流体BootStrap3属性未在浏览器检查器下显示

时间:2022-06-25 17:25:42

I have been working with Bootstrap3 for a few months now and I have noticed that whenever I use an attribute like container-fluid and row-fluid they are not highlighted under a browser inspector compared to their counterparts container and row. The fluid attributes under the Chrome Inspector points to a div with a width of the parent div in pixels but a height of 0px. Using the Firefox Firebug Inspector plugin whenever I inspect a row-fluid or container-fluid nothing would be highlighted.

我已经使用Bootstrap3几个月了,我注意到每当我使用像容器流体和行液这样的属性时,它们都不会在浏览器检查器下突出显示,与对应的容器和行相比。 Chrome Inspector下的流体属性指向div,父div的宽度以像素为单位,但高度为0px。每当我检查排液或容器液时,都会使用Firefox Firebug Inspector插件,不会突出显示任何内容。

I have attached some screenshots of my a simple Bootstrap project I am working on below under the Chrome Inspector. My question is why is this so? Why doesn't the browser recognize the fluid element as any other element with an appropriate height?

我附上了一个我在Chrome Inspector下面的一个简单的Bootstrap项目的截图。我的问题是为什么会这样?为什么浏览器不能将流体元素识别为具有适当高度的任何其他元素?

Screenshot Using row: 为什么流体BootStrap3属性未在浏览器检查器下显示

截图使用行:

Screenshot Using row-fluid:为什么流体BootStrap3属性未在浏览器检查器下显示

截图使用row-fluid:

1 个解决方案

#1


1  

row-fluid class got removed in bootstrap3. So if you have col-ss-xx elements inside it, since col-ss-xx have float:left rule their parent row-fluid, will not take height, thats why you do not see the "highlighted" area on chrome when you select them. Just use row class instead. container-fluid it has same padding as container but always 100% width, does not depend on viewport.

在bootstrap3中删除了row-fluid类。因此,如果你在其中有col-ss-xx元素,因为col-ss-xx有浮动:左边规则它们的父行 - 流体,不会占用高度,这就是为什么当你没有看到chrome上的“突出显示”区域的原因选择它们。只需使用行类。 container-fluid它与容器具有相同的填充但总是100%宽度,不依赖于视口。

Migrating from bootstrap 2.x to 3.0 here

这里从bootstrap 2.x迁移到3.0

#1


1  

row-fluid class got removed in bootstrap3. So if you have col-ss-xx elements inside it, since col-ss-xx have float:left rule their parent row-fluid, will not take height, thats why you do not see the "highlighted" area on chrome when you select them. Just use row class instead. container-fluid it has same padding as container but always 100% width, does not depend on viewport.

在bootstrap3中删除了row-fluid类。因此,如果你在其中有col-ss-xx元素,因为col-ss-xx有浮动:左边规则它们的父行 - 流体,不会占用高度,这就是为什么当你没有看到chrome上的“突出显示”区域的原因选择它们。只需使用行类。 container-fluid它与容器具有相同的填充但总是100%宽度,不依赖于视口。

Migrating from bootstrap 2.x to 3.0 here

这里从bootstrap 2.x迁移到3.0