问题标签 [bootstrap-grid]

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 投票
6 回答
280016 浏览

twitter-bootstrap - Bootstrap 组合行(rowspan)

我正在测试Twitter Bootstrap并陷入了带有行的基本脚手架。我多次重新访问他们的文档,我可以看到嵌套列,您基本上可以将列嵌套在一列中,但我无法找到将行组合为一个并使其与未组合行旁边的列对齐的能力。

下图应该说明我想要完成的事情。

行跨度布局示例

我遇到的唯一解决方法是使用表格,但我不喜欢这个想法,因为我认为响应性不适用于表格的使用。

有没有人对此有任何优雅的解决方案?我所做的大部分网络布局都需要良好的灵活性,所以如果我能在这里找到一些有用的东西会很棒。

0 投票
0 回答
63 浏览

javascript - 在 UI 中表示以下数据和突出显示的最佳方式是什么

例如我有以下数据,

通过使用上述数据,我需要将数据与expectedValuesObjactualValuesObj进行比较,这些对象中的每个值,如果发现任何不匹配,那么我必须突出显示与expectedValuesObj不匹配的记录。

例如,在expectedValuesObj[0]中,我将与actualValuesObj[0]进行比较 ,我没有发现任何不匹配,因为 actualValuesObj[0] = ["a.com","testid1","200.00"] 所有值都与expectedValuesObj[0] = ["a.com","testid1","200.00"]. 记录

如果发现任何记录不匹配,那么我必须突出显示该记录。

我更喜欢使用 js、bootstrap、jquery、dataTables 和 laodash 的任何好的建议和想法。

注意:为了比较两个数据集,如果您愿意,可以根据自己的喜好更改 dataFormat,如果您觉得给定的 dataSet 不具有可比性。

主页.html

mainPage2.hmtl

所以我期望比较和突出显示的逻辑可以在 File2.js 中。

文件1.js

文件2.js

0 投票
0 回答
90 浏览

php - 所见即所得的 boostrap 编辑器返回 [object Object]

我试图通过 ajax 将所见即所得的 boostrap 编辑器内容传递到 php 页面,但编辑器的内容返回为 [object Object] 我不知道做错了什么或根本没有做什么这是我的代码

这是我的ajax

0 投票
1 回答
445 浏览

javascript - 我如何解决文件导入在 Rails 5 中找不到或不可读

为什么rails 5,当twitter-boostrap低于错误时

找不到或无法读取要导入的文件:bootstrap-sprockets。导轨 5

使用 boostrp 时在 c9.io 中出现错误

0 投票
1 回答
4253 浏览

reactjs - React js datetimepicker在组件内的使用

我是recatjs的新手。我需要使用boostrap创建一个带有datetimepicker的输入字段,因为我正在使用boostrap datetimepicker cdn链接,我不知道如何在组件内部调用并在componentdidmount方法中获取datetimepicker的值。请为我提供解决方案。

0 投票
1 回答
40 浏览

html - 自举网格系统未按预期响应

所以我对文档的理解是

xs = 像手机一样小

sm = iPad 和其他平板电脑

md = 小型笔记本电脑

lg = 大型笔记本电脑和大型台式机

我期望的是,在我的手机上,该项目将占据整个宽度,两侧都有“排水沟”。

在平板电脑(sm)上,我希望它选择之前的 xs 声明,因此它应该占用整个 12 列。因为我没有指定任何“sm”

在笔记本电脑(md)上,我期望三个项目。

在较大的(lg)屏幕上,我每行四个项目。

我用来测试响应能力的方法只是调整我的浏览器。当我缩小窗口时会发生什么,当我的项目最小(xs 和 sm)时,我的项目最终会变成每行一个项目,但它溢出我看不到整个项目。

我做错了什么,我误解了网格系统背后的理论吗?

0 投票
2 回答
201 浏览

twitter-bootstrap - Bootstrap嵌套网格对齐问题

我真的对这个引导网格问题感到困惑。从下面的截图(来源:http ://uforest.org/Species/C/Callerya_atropurpurea.php )。标题“参考”在 md 和 sm 的大小处超出了网格对齐。

在此处输入图像描述

从下面的代码可以看出,References 的网格布局和下面的引文都在 col-lg-12 下。这嵌套在 col-md-9 的列中。“参考”已改为跳到另一个 col-md-3 列。

有谁知道为什么?这种布局适用于我所有的其他 200 页,并且只有 2 个这样的实例。

谢谢!

[已解决] 感谢@Prince sodhi 建议添加类 clearfix。我将它添加到包含照片的 div 标签之一,它解决了这个问题。

0 投票
4 回答
131 浏览

css - 如何在我的 div.main 类上设置最大高度

在我的网站上(使用 zenphoto 和 boostrap 3),我的 div.main 课程有问题。 http://test.vincentbourganel.fr

我有静态导航栏和底部的固定页脚。我希望 div.main 具有“其余部分的 100% 的高度”。当我的内容没有占用所有剩余高度时,它不起作用。

请参阅此页面作为示例: http ://test.vincentbourganel.fr/page/contact/

你能帮我解决这个问题吗

0 投票
1 回答
997 浏览

java - 如何使用 thymeleaf 将值传递给引导程序的数据?

我想使用 Thymeleaf 将值传递给 Bootstrap 中的数据。

我不知道该怎么做。你能帮助我吗?

0 投票
0 回答
99 浏览

html - 如果太多布局损坏,则引导选项卡

我使用 Bootstrap 和 themedesigner.in/demo/matrix-admin/index.html 这个主题我想制作这样的标签面板:http://scr.hu/1det/63r1u如果我添加更多标签布局被破坏:http ://scr.hu/1det/d2s8w 这是我的代码:

所以我应该改变什么,正如我所说,我使用 Laravel/Bootstrap 和这个布局 themedesigner.in/demo/matrix-admin/index.html