有什么方法可以在Bootstrap中添加断点吗？

Question

有没有办法将第5个breakpont添加到4已经存在？不幸的是,对于我们目前正在进行的项目来说,4还不够.我的想法是创建一个超过1400px的新断点screen-hd.有简单的方法吗？

Answer 1

我认为获取引导程序的较少文件并按照您需要的方式生成新的 CSS 是一个很好的做法。第一种方法是使用Variables.less文件，该文件通常包含您需要的所有内容。

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

//== 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 预处理器也很好，因为less和sass，它们现在正在成为标准。

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

祝你好运！