问题标签 [grid-system]

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 投票
4 回答
1766 浏览

reactjs - React Material-UI 网格系统

我正在寻找一种方法来实现响应式网格系统,以使用 react 和 material-ui 开发材料设计应用程序。
虽然React-Bootstrap这个,但我没有找到与 Material-UI 类似的东西。GridList很好,但不完全相同。有什么解决办法吗?

0 投票
2 回答
2357 浏览

html - bootstrap的网格系统的一行12列有必要填满吗?

有必要填满一行的所有 12 列吗?

示例 1 - 仅声明了总共 12 行中的 2 列:

示例 2 - 也声明了未使用的列:

浏览器可以以不同的方式缩放 2 示例吗? 我倾向于认为一个好的做法是示例 2。

0 投票
2 回答
61 浏览

twitter-bootstrap - 引导程序:网格系统未能将所有列放入一行

在我的 webapp 项目中,我使用 Bootstrap 作为前端框架。还有一个问题让我感到困惑。HTML 代码如下:

但结果如下: 在此处输入图像描述

令人困惑的一点是所有列的宽度加起来只有12,这符合网格系统规则。但是为什么不能将这些组件放在一行中呢?

0 投票
1 回答
270 浏览

twitter-bootstrap-3 - Bootstrap Grid 系统和 Table 元素

引导网格系统是否取代了对表格的需求?我的意思是我可以通过如下表格将一行分成 3 部分:

也通过使用像这样的网格:

不知何故,看起来我可以使用网格和表格,反之亦然。因此,如果我必须在导航栏中的某个特定位置放置一些东西,我应该使用什么方法?任何帮助将不胜感激。

0 投票
2 回答
1217 浏览

css - 填充引导行中的空列

我正在尝试在响应式网格中显示图像列表。我正在使用角度和引导程序,并且图像是通过 flickr API 动态加载的。无论如何,这是我显示图像的代码片段。

这是结果

如您所见,垂直图像左侧的一列仍为空。我想这是引导程序的正常行为,但是有没有办法告诉引导程序也填充那个空间?

正如您可能已经理解的那样,我不是 CSS 天才,所以任何帮助都将不胜感激。

先感谢您

0 投票
0 回答
106 浏览

css - 网格系统无法使用导航栏定位

我对导航栏和网格系统有一些疑问。

Q1.网格系统

我在左侧和右侧制作了两个 100% 高度的导航栏,但中心文本似乎位于左侧 :0 ,左侧导航栏与其重叠。

这是我的代码的链接。

在此处输入链接描述

图片显示了我想要的。 我真正想要的。

Q2。如何使顶部和两侧的文本块大小相同?

在全屏时,它们的大小相同,但我想知道该怎么做。非常感谢。

0 投票
1 回答
559 浏览

css - 具有不同列高的响应式网格

有没有一种简单的方法可以在网格中排列一些不同大小的框并使其具有响应性?

我听说过使用砖石,但我正在寻找更简单的东西。这是 800px 长,所有东西在高度和宽度上都可以被 200px 整除:

在此处输入图像描述

0 投票
2 回答
240 浏览

css - 材料设计灯。网格系统意外行为

先上一张图:

在此处输入图像描述

这是来自getmdl.io的屏幕。我无法理解这种行为。我很难过,我想要的正是3 列,每列的宽度等于行宽的 1/3。但在某些屏幕分辨率中,列宽等于行宽的一半。这来自基于媒体查询的 css 指令,似乎是设计使然。

所以我的问题是,我可以防止这种行为吗?如果不是,那么这种行为的原因是什么。

PS我来自引导程序,我没有这个问题。

0 投票
1 回答
3457 浏览

html - Bootstrap 网格系统列在彼此下

我的引导网格系统有点问题。我在页面顶部创建了自己的导航 div。对于较大的屏幕尺寸,这一切都很好。当我将屏幕尺寸减小到 xs 时,它会中断。这就是我的目标:

以上适用于除 xs 之外的所有屏幕。对于 xs 我得到:

我想要的是:

这是我的代码:

0 投票
1 回答
66 浏览

html - 折叠侧边栏引导程序

我是 Bootstrap 的新手,在理解网格系统的工作原理方面有一点问题。最初,我为带有侧边栏的页面提供以下代码:

使用以下CSS:

它在大屏幕上工作正常,但在小屏幕尺寸上存在以下问题: 在此处输入图像描述

我非常感谢任何关于为什么侧边栏文本没有调整到侧边栏区域的大小的解释?谢谢你的帮助。