Question

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

Answer 1

我在我的项目中使用它：

@media (min-width: 1600px) {
    @for $i from 1 through 12 {
        $width: $i / 12 * 100;
        .col-xl-#{$i} {
            width: unquote($width + '%');
            float: left;
        }
    }   
}

Answer 2

我认为抓住引导程序的less文件并以您需要的方式生成新的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 Customization Best Practices [closed]

祝你好运！

Answer 3

在 Bootstrap 3 上，添加断点并不简单。

如本issue中所述，您必须添加自己的内容。

这是一个示例代码，用于使用sass file或css file添加新的断点。

Answer 4

您可以创建自定义css文件并按如下方式自定义列：

.grid-seven .col-md-1 { width: 14.285714285714%; }
.grid-seven .col-md-2 { width: 28.571428571429%; }
.grid-seven .col-md-3 { width: 42.857142857143%; }
.grid-seven .col-md-4 { width: 57.142857142857%; }
.grid-seven .col-md-5 { width: 71.428571428571%; }
.grid-seven .col-md-6 { width: 85.714285714286%; }
.grid-seven .col-md-7 { width: 100%; }

对于您的情况，您必须使用grid-five

.grid-five .col-md-1 { width: 20%; }
.grid-five .col-md-2 { width: 40%; }
.grid-five .col-md-3 { width: 60%; }
.grid-five .col-md-4 { width: 80%; }
.grid-five .col-md-5 { width: 100%; }

html是这样的：

<div class='row grid-five'>
    <div class='col-md-1'>this will take 1/5th of the row</div>
    <div class='col-md-2'>this will take 2/5th of the row</div>
</div>
<div class='row grid-seven'>
    <div class='col-md-1'>this will take 1/7th of the row</div>
    <div class='col-md-2'>this will take 2/7th of the row</div>
</div>

这绝不会影响默认的引导网格系统，因此您是安全的。保持在我的网格七和网格五是我自己创建的类，所以你可以创建自己的类。 grid7, grid-5, grid5 grid-7或者只使用我使用的那个

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

4 个答案: