Удаление контрольных точек из Bootstrap 3

Question

Я унаследовал веб-приложение, которое использует Bootstrap 3 как свою структуру с некоторой базовой настройкой, применяемой с помощью рекомендуемого метода _custom-variables.scss. Официальный порт SASS добавляется как зависимость и включается в файл app.scss с использованием @import "bootstrap"; после _custom-variables.scss и _custom-mixins.scss.

Приложение для измерения ширины полосы жидкости не будет использоваться на небольших экранах (из-за большого количества отображаемых данных), поэтому я хочу отключить или удалить точки останова и -sm- из CSS. Макет будет оптимизирован для -lg- и -md- точек останова с -md-, являющимся самой узкой точкой останова.

В _custom-variables.scss, я изменил $container-tablet ширину от:

// Small screen/tablet 
$container-tablet:    (720px + $grid-gutter-width) !default; 
//** For `$screen-sm-min` and up. 
$container-sm:     $container-tablet !default; 

// Medium screen/desktop 
$container-desktop:   (940px + $grid-gutter-width) !default; 
//** For `$screen-md-min` and up. 
$container-md:     $container-desktop !default; 

к:

// Small screen/tablet 
$container-tablet:    (940px + $grid-gutter-width) !default; 
//** For `$screen-sm-min` and up. 
$container-sm:     $container-tablet !default; 

// Medium screen/desktop 
$container-desktop:   (940px + $grid-gutter-width) !default; 
//** For `$screen-md-min` and up. 
$container-md:     $container-desktop !default; 

Я также установил min-width: $container-md; на родителя <div> оберточной весь макет.

Это работает, пока я включаю классы для нежелательных точек останова на моих HTML-элементах. Например, следующий поддерживает ширину колонки 25%:

<div class="col-xs-3 col-sm-3 col-md-3">

но опуская меньшие классы точек останова удаляет width свойства и <div> по умолчанию ширины до 100%, когда браузер сжимается ниже 992px (в min-width значение контрольной точки -md-).

Мои вопросы:

1. Почему мне нужно указать дополнительные меньшие точки останова классы на моих контейнерах? (Мои навыки Bootstrap ржавые!)
2. Есть ли лучший способ удаления/отключения двух меньших точек останова?

Answer 1

Вы меняете только ширину container, поэтому вам нужно указать меньшие классы точек останова.

Попробуйте изменить останова себя:

@screen-md:     1px; 
@screen-md-min:    @screen-md; 

И вы должны указать мин-ширина для container вручную:

@media (min-width: 1px) { 
    .container { 
    width: 970px; 
    } 
} 

CODEPEN

Answer 2

Видя, как я ссылки каждый Bootstrap парциальное мне нужен индивидуально в app.scss, я применил аналогичный подход к тому, как вы применяете свои собственные переменные при разделении Bootstrap ,

1. Я сделал копию bootstrap/grid.scss и назвал его bootstrap/custom-grid.scss
2. В app.scss, я выгружена ссылку на bootstrap/grid.scss со ссылкой на bootstrap/custom-grid.scss
3. Внутри bootstrap/custom-grid.scss я удалены следующие строки:

...

@media (min-width: $screen-sm-min) { 
    width: $container-sm; 
} 

@include make-grid(xs); 


@media (min-width: $screen-sm-min) { 
    @include make-grid(sm); 
} 

@media (min-width: $screen-md-min) { 
    @include make-grid(md); 
}