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

html css twitter-bootstrap responsive-design

5674 просмотра

3 ответа

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

Автор: Nikita Merkulov Источник Размещён: 13.11.2019 11:48

Ответы (3)

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-препроцессорами, как менее и нахально , они становятся стандартом в наши дни.

См. Также рекомендации по настройке Twitter Bootstrap [закрыто]

Удачи!

Автор: David Lemon Размещён: 27.05.2015 01:46

2 плюса

Я использую это в моем проекте: 

@media (min-width: 1600px) {
    @for $i from 1 through 12 {
        $width: $i / 12 * 100;
        .col-xl-#{$i} {
            width: unquote($width + '%');
            float: left;
        }
    }   
}
Автор: Dariusz Majchrzak Размещён: 26.05.2017 01:21

-1 плюса

Вы можете создать собственный файл 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-семь и grid-пять - это классы, которые я создал сам, чтобы вы могли создавать свои собственные классы. grid7, grid-5, grid5 grid-7или просто используйте тот, который я использовал

Автор: Coding Enthusiast Размещён: 27.05.2015 01:09
Вопросы из категории :
32x32