问题标签 [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 投票
1 回答
11727 浏览

html - How to offset div columns in CSS grid system

Does anyone know to offset the first two divs that are in side row that have the class col-3-12 to have an offset of offset-6-12 and offset-9-12 to be on the right side of my grid system jsFiddle

CSS:

HTML:

0 投票
5 回答
826 浏览

php - 在网页上创建动态网格系统

我正在寻找为我正在处理的网页创建一个网格系统,以显示一定数量的项目/项目属性。但是,由于我拥有的数据非常动态,我并不总是知道需要显示的项目数量,因此无法确切知道网格项目应该具有哪些尺寸才能正确格式化页面。

谁能指出我如何开始像上面那样的网格的正确方向?

我对 HTML、php 和 CSS 有点熟悉。我知道有大量用于在线创建的数据资源,但是我认为我没有找到我想要的东西。

0 投票
1 回答
353 浏览

css - SASS grid system WITHOUT edge gutters

I'm looking for a sass grid system that does not have edge gutters, a.k.a. there is no left gutter applied to the first column, and no right gutter applied to the last column.

Normally you could simply use :first-child / :last-child to remove the gutters, but then the first/last columns would be slightly wider than the rest (I'm using padding as gutters).

Is there a grid system that supports this? Or would I be better off writing it on my own?


Edit: I decided to go ahead and try writing my own solution :) Answer below.

0 投票
2 回答
71 浏览

html - 我在哪里可以找到响应式网格系统

我已经开始了一个新项目,我需要(仅)响应式网格进行布局。
我已经尝试过使用http://www.responsivegridsystem.com/这个网格系统,它很好,但是它为输入和其他我不需要的元素添加了一些类,并且它在我的一些表单中弄得一团糟。
我正在寻找任何解决方案。

我只需要不会与其他元素混淆的响应式网格。

有没有这样的框架?

0 投票
1 回答
38767 浏览

html - Bootstrap 嵌套网格系统最佳实践

我正在尝试使用引导程序而不是外部 css 创建一个站点。看来我可以使用嵌套网格系统实现许多格式化目标。

前任

这是一个合理的做法吗?

0 投票
3 回答
4094 浏览

css - 创建新的 twitter-bootstrap 响应列大小

Atm 我正在使用 col-lg、col-md、col-sm 和 col-xs

碰巧 col-xs 设置为宽度 768px,我猜。

我怎样才能创建一个新的 col-xxs 或更小的东西,例如。宽度 480 像素?

0 投票
4 回答
1154 浏览

css - 如何使容器内的 div 仅使用引导程序 3 中 12 列中的 6 列?

该代码在大屏幕上正确显示了两列。但对于平板电脑大小的屏幕,两个 div 占据自己的行,每个使用 12 列。

我希望他们每个人都使用 6 列在同一个容器中。我曾尝试更改课程中的数字,col-xs-12 col-sm-6 col-md-6 col-lg-4 但没有任何效果。

这是我的代码:

0 投票
4 回答
20724 浏览

html - CSS Flex Box:如何在不丢失弹性项目高度的情况下将“弹性项目”垂直对齐到中间?

目前我的“flex”项目看起来像这样(垂直对齐:顶部)......



我的目标是让它们看起来像这样(垂直对齐:中间)......


我的要求:

  • 弹性容器必须保持在 100% 的高度
  • 弹性项目必须保持 25% 的高度(等于 100%,这是它的默认值)。
  • 弹性项目必须垂直居中。
  • 这必须是响应式的并且足够聪明以保持在每个设备的中间(所以没有行高/填充)

http://jsfiddle.net/oneeezy/p4XtA/

HTML

CSS

0 投票
1 回答
4255 浏览

twitter-bootstrap - 具有网格系统的多个嵌套列

我似乎无法解决这个问题。
如何在引导网格系统中制作此表?

这是一个常规table

我尝试了以下方法:

0 投票
11 回答
65858 浏览

css - 在引导程序中使用容器流体导致水平滚动条

这是一个简单的例子:

小提琴中的演示

当我在浏览器中看到结果时,我得到一个水平滚动条。

为什么会这样?

我究竟做错了什么?