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

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

bootstrap-4 twitter-bootstrap-3 twitter-bootstrap

Laurence · 技术社区 · 6 年前

我已经将一个简单的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 回复 | 直到 6 年前

Laurence 6 年前

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

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

row类来自BS4,并设置

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

推荐文章

Glyn · 如何使用jQuery更改动态创建的按钮<span>中的文本?

4 年前

Salman Abbas · 如何在导航栏切换中更改下拉菜单中链接的颜色

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Knownow · 通过导航显示背景

7 年前

Mona Coder · 删除Bootstrap 3上下拉菜单和下拉菜单之间的边框

7 年前

user9727963 · 引导和Internet Explorer 11问题

7 年前

Queen of the North · 无法更改输入表单宽度

7 年前

jaggs · 如何将java中创建的href链接传递到jsp页面

7 年前

Abu Ayyub · 引导中具有一个边框的多个输入元素

7 年前

espresso_coffee · 所选内容在我的引导/JQuery应用程序中不起作用?

7 年前