Как изменить переменные для навигационного бара в бутсрапе?

Question

[codenaki]

Всем привет !
Нужно изменить дефолтное поведение для навигационного бара в бутстрапе ..
Зашол в фреймворк в раздел Less для переменных , пример кода :

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  906px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

Изменил на 906 так как мне надо чтобы мой Navbarr слаживался при достижении 906 пикселей ..
Не вижу никаких изминений так как остаётся дефолтное поведение при 768 пикселей ..
Кто может подсказать как правильно изменить прописанные переменные для достижение коллапса при 906 пикселей ..

Answer 1

[iBird Rose]

ищи переменную @grid-float-breakpoint в variables.less

Comments

[codenaki]

Пример кода из бутсрап:

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  907px;
@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);

Переменная которая принимает значения которое я меняю ?
По точнее ответ плиз , переменную вижу и что с ней ?

[iBird Rose]

codenaki, ну вот навбар свернется при значении @screen-sm-min. поставишь туда 906px, то свернется на 906

[codenaki]

iBird Rose, Ну так он не сворачивается , в этом смысл вопроса , почему ?

[codenaki]

iBird Rose, Какието еще изминения нужны ? У меня версия 3.3.7 написанно что это deprecated с 3.3.1 .. Есть гдето новый не deprecated код ?

[iBird Rose]

codenaki, навбар коллапсится только по @grid-float-breakpoint
если не работает - вы что то делаете не так.
кстати у вас в примере в шапке вы меняете @screen-sm: 906px; а у @grid-float-breakpoint дефолтное значение @screen-sm-min.

[codenaki]

iBird Rose,
@screen-sm-min: @screen-sm;
@grid-float-breakpoint: @screen-sm-min;
Не понятно о чём вы , в код внимательнее присмотритесь ..

[iBird Rose]

codenaki, ок. ты уверен что ты less нормально компилируешь и в выходных css все правильно прописалось?

[codenaki]

iBird Rose, Нет не уверен раз не работает .. Как сгинирировать заново сам бутсрап я помню была такая опция на сайте .. Там задать новый размер для навигации ..

[iBird Rose]

codenaki, пользуйся тогда этим https://getbootstrap.com/docs/3.3/customize/#grid-... выкачаешь готовые css и готово.