创建自定义网格系统宽度定义的列宽 [英] Create custom grid system width defined column widths

问题描述

bootstrap 3网格系统针对4种不同的屏幕分辨率，具体取决于它们的宽度:

The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:

• 大/col-lg(> = 1200像素宽)
• 中/col-md(992px-1199px)
• 小/col-sm(768像素-991像素)
• 超小/col-xs(< 768px)

我发现这些解决方案不代表我的Web应用程序的用户组.例如，中小型"组合使用的用户群不到5％(意味着不到5％的用户的屏幕分辨率宽度为768像素至1199像素).

I find that these resolutions do not represent the user group of my webapp. For example Medium and Small combined is used by less than 5 % of my user base (meaning less than 5 % of my users have a screen resolution width of 768px to 1199px).

我宁愿针对以下4种不同的分辨率:

I would rather target the following 4 different resolutions:

• ExtraLarge(> = 1600px宽度)
• 大(1200像素-1599像素)
• 中小型(600-1199px)
• MobileSmall(< = 599像素)

因此，我不仅喜欢添加一个特大号的套装，而且还更改/替换中，小型和超小号的套装.

So I not only like to add an extra large set but also change / replace the medium, small and extra small one.

有人遇到类似的问题吗?我很想使用一个网格生成器，在其中输入我的自定义网格宽度并获取CSS代码.

Has anybody run into similiar issues? I would love to use a grid generator where I input my custom grid widths and get out the CSS code.

推荐答案

您可以使用官方网站的自定义部分自定义Bootstrap的各个方面.

You can customize pretty much every aspect of Bootstrap using the customization section of the official site.

http://getbootstrap.com/customize/#grid-system

该链接将您直接带到网格系统项目.

That link takes you directly to the grid system items.

输入您的值，然后下载您的自定义版本的Bootstrap.甚至在设置中包含一个JSON文件，因此您以后可以重新导入它们并进行调整.

Enter your values, and download your custom version of Bootstrap. Even includes a JSON file with your settings so you can re-import them later and make adjustments.

这篇关于创建自定义网格系统宽度定义的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！