任何在Bootstrap中添加斷點的方法？

Question

有什麼方法可以將第5個breakpont添加到已存在的第4個？不幸的是，對於我們目前正在進行的一個項目來說，4是不夠的。這個想法是創造一個新的斷點screen-hd，它大於1400px。有沒有簡單的方法來做到這一點？

Answer 1

我認爲這是一個很好的做法，可以抓取引導程序的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 2

您可以創建自定義的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 .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或者只是使用我使用的那個

Answer 3

我在項目中使用這樣的：

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