问题标签 [bootstrap-4]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
987 浏览

html - 在引导程序 4 中过多使用 .row

我在引导程序中发现了一些关于 .row 类的例子和一些矛盾的东西。这样做更好吗

一个)

或者

b)

还是没关系?

0 投票
2 回答
3093 浏览

twitter-bootstrap - 卡中的 Twitter 引导数据 src 无法正常工作

按照 twitter bootstrap 网站上给出的示例,以下代码

应该会产生一张不错的卡片,但它会产生

在此处输入图像描述

谁能告诉问题可能是什么?似乎数据属性对我不起作用。

0 投票
1 回答
1091 浏览

jinja2 - 带有 Jinja2 for 循环的引导选项卡面板

我正在尝试让 bootstrap 4 dev 选项卡与 jinja2 中的 for 循环一起使用。

这是我正在尝试的测试代码:

导航选项卡按预期运行,两个选项卡可见,“1”和“2”,并且正确应用了活动类。

但是,在导航选项卡之间单击时,内容选项卡不会更改。内容选项卡在“1”上是静态的。

将 loop.index 条件更改为 loop.index == 2 意味着选项卡内容在“2”上是静态的。

我在这里想念什么?

谢谢。

0 投票
2 回答
849 浏览

html - Bootstrap 4:对齐卡片组内的内容

我的 Bootstrap 4 页面中有一副纸牌。我想对齐这些按钮以获得更好的外观。我们怎么能做到这一点?

这是一张图片: 截屏

这是演示:http: //7freres.com/new

该表似乎不起作用,因为它们是分开的。

坦尔斯

0 投票
6 回答
164194 浏览

html - Bootstrap 4 - 卡片列中的响应式卡片

我正在使用 Bootstrap 4,但我找不到在divwith中添加对卡片的响应性的解决方案class="card-columns"(此类将类似砌体的效果应用于具有此类的 div 内的卡片)。

在 Bootstrap 3 中,很容易设计样式并使“卡片”响应式,因为可以将类似的东西应用class="col-md-3 col-sm-6 col-xs-12"到包含thumbnail,caption等的 div 上。

在 Bootstrap 4 中使用卡片时如何产生相同的效果?

这是HTML:

这是我使用的 CSS:

下面是两张图片,可以让我的情况更清楚:

大屏幕

更小的屏幕

我希望卡片在较小的屏幕上垂直堆叠。

感谢您的建议!

0 投票
1 回答
2147 浏览

css - Bootstrap 4固定导航栏重叠主体

现在 [几乎] 一切都基于 off rems,导航栏似乎有一些时髦的高度属性。一方面,导航栏高度是可变的,而填充是顶部和底部的静态 8px。

由于导航栏的伪动态特性,简单地将 body 的 padding-top 设置为 50px 不再有效。如果用户改变他们的字体大小,栏的高度将不再是 50px。

有没有人想出如何在滚动到页面顶部时为正文提供适当数量的填充以使其恰好位于导航栏下方?

如果必须使用 jQuery 来实现这一点,这似乎是一种回归,但也许这是唯一的方法。

示例代码:

请注意,条形图在某些字体大小处是如何重叠的,而在其他大小处则存在间隙。在 Mac OS X 上,您可以使用 command+minus 和 command+plus 更改字体大小

编辑:我在 bootstrap 4 github 页面上提出了一个问题。该错误已得到确认,但它可能超出范围,因为它们通常不支持缩放效果。

0 投票
1 回答
1250 浏览

jquery - 为什么 jQuery validate 不能在我的表单上工作?

谁能告诉我为什么这些字段没有被验证yourTelephoneNumbersyourEmailAddress基本上,我正在尝试设计我的表单,以便用户必须输入电话号码或电子邮件地址。

控制台日志;

错误:引导工具提示需要 Tether ( http://github.hubspot.com/tether/ ) bootstrap.js:2772:1

TypeError:验证器未定义

标签中的<head>代码;

实际开发站点- 单击标有“进行查询”的按钮

jsFiddle

0 投票
1 回答
2471 浏览

twitter-bootstrap-4 - Bootstrap 将需要 Sass 编译器和 Autoprefixer 来进行与我们的官方编译版本相匹配的设置

我想将 bootstrap 4 用于一个全新的项目,但我对此感到困惑。

问:我可以只下载源代码然后指向:

这就是我需要担心的全部?我需要担心 Reboot、Grid Only 还是 Flexbox?我只想使用引导程序。我不想担心各种选项和设置。

0 投票
1 回答
782 浏览

twitter-bootstrap-4 - Bootstrap 4 入门

这是迄今为止我想出的最小配置:

问:在打开 body 标签之后,替换的是什么div class="container"

0 投票
3 回答
5698 浏览

html - 使用 Bootstrap v4 证明导航药丸的合理性

我想在 div 的宽度上证明我的导航栏是合理的。问题是我使用Bootstrap v4nav-justify类还不可用。

这是代码:

我不想在 CSS 中使用百分比来做到这一点;我想要一些反应灵敏的东西。