代码之家 › 专栏 › 技术社区 › Laurence

将引导程序3迁移到4后的布局问题(表宽,元素内联,而不是垂直堆叠)

bootstrap-4 twitter-bootstrap-3 twitter-bootstrap

0

Laurence · 技术社区 · 5 年前

我已经将一个简单的ASP.NET站点从Bootstrap 3.2.0迁移到了4.3.1(使用Bootstrap.min.css和Bootstrap.bundle.min.js)。网站使用jQuery 3.2.1前后。

我将nav菜单转换为与新的Bootstrap 4设计相适应,将header和main内容包装在header和main元素中,并将所有Glyphicon引用交换为FontAwesome,但HTML保持不变。

我现在有两个主要的布局问题:

一个表(用来显示一个数据网格)现在的自动宽度是407px,尽管CSS告诉它是100%。在Bootstrap 3下,它的自动宽度为1140px(在桌面显示器上),同时在CSS中也是100%。换句话说,该表现在“缩小以适应”而不是扩展以填充可用空间。
桌子上方有一个H1标题和一个按钮。它们现在水平对齐,而不是垂直堆叠。

我确实读过文件 migration guidance ,但我看不到任何东西告诉我为什么会有上述行为。

引导程序3:

引导程序4:

0 回复 | 直到 5 年前

1

0

Laurence 5 年前

我最终解决了这个问题。。。有点晦涩。希望这能帮助别人。。。。

从上面的屏幕截图可以看到,在Bootstrap 4 HTML中,有问题的内容被包装在一个DIV中,其中class=“row justify content center”。

row类来自BS4,并设置

这对子元素有一些意想不到的影响。。。至少如果你不了解新的Flex显示模式。例如,即使子元素 显示:块 ,他们表现得好像 显示:内联 . 因此H1标题和按钮是内联的,而不是堆叠的,并且包含表的DIV(在H1之后)收缩到最小宽度(导致表收缩,因为它被设置为 宽度:100% ).