任何方式添加一个断点在Bootstrap？ [英] Any way to add a breakpoint in Bootstrap?

问题描述

有没有办法向已经存在的4添加第5个breakpont？不幸的是，4是不够的，我们目前工作的项目。想法是创建一个新的断点screen-hd，这是超过1400px。有很简单的方法吗？

Is there any way to add a 5th breakpont to 4 that already exist? Unfortunaetly, 4 is not enough for a project we currenty work on. the idea was to create a new break point screen-hd, which is more than 1400px. Is there easy way to do it?

推荐答案

我认为这是一个好习惯，抓住少于的引导文件，只是按照你需要的方式生成一个新的CSS。第一种方法是使用 variables.less 文件，该文件通常包含您需要的所有内容。

I think it's a good practice to grab the less files of bootstrap and just produce a new CSS in the way you need. The first approach is to use variables.less file, that file contains usually all that you need.

对于您需要自定义的内容，许多变量，例如，您可以更改变量 grid-columns 的列数，也可以更改断点。

For what you need to customize there are many variables, for example you can change the number of columns altering the variable grid-columns and also change the breakpoints.

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

https://github.com/twbs/bootstrap/blob/master/less/variables.less#L281-L332

熟悉CSS预处理器也是很好的，如少和 sass ，他们现在已成为标准。

It's also good to get familiar with CSS preprocessors as less and sass, they are becoming a standard these days.

另请参阅 Twitter Bootstrap自定义最佳实践[关闭]

祝你好运！

这篇关于任何方式添加一个断点在Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！