Любой способ добавить контрольную точку в Bootstrap?

Question

Есть ли способ добавить пятый breakpont в 4, которые уже существуют? К сожалению, 4 недостаточно для проекта, над которым мы сейчас работаем. идея заключалась в создании нового экрана точки останова hd, который составляет более 1400 пикселей. Есть ли простой способ сделать это?

Answer 1

Я думаю, что это хорошая практика, чтобы захватить файлы bootstrap 0xи просто создать новый 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> 

Это никак не повлияет на систему сетки бутстрапа по умолчанию, чтобы вы были в безопасности. Удерживайте в себе, что grid-seven и grid-five - это классы, которые я создал самостоятельно, чтобы вы могли создавать свои собственные классы. 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; 
     } 
    } 
}