Где отредактировать bootstrap @grid-float-breakpoint

Я знаю, что вы можете изменить @grid-float-breakpoint в файле "variables.less", который компилируется в пакет bootstrap, который мы все загружаем и используем (я думаю).

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Мой вопрос в том, можете ли вы изменить точку @grid-float-breakpoint без настройки нового пакета начальной загрузки, но вместо этого изменить его с помощью CSS с помощью @media или какого-либо другого метода. Если возможно, проконсультируйтесь с методом, где и как это сделать. Благодаря

ОТВЕТЫ

Ответ 1

Есть два рекомендуемых основных и разных способа изменения точки @-го-float-breakpoint (это переменная в LESS).

  • Вы можете загрузить мастер (https://github.com/twbs/bootstrap/archive/master.zip), откройте файл bootstrap.com/variables.less и затем скомпилируйте его с помощью компилятора LESS. Это включает установку компилятора LESS на вашем компьютере, например Grunt (многоплатформенный) или CodeKit (Mac).

enter image description here

  1. ИЛИ Перейдите в getbootstrap.com/customize и измените там переменную и загрузите скомпилированный файл CSS.

enter image description here

Ответ 2

Вот ссылка на решение css-only для изменения точки останова с сеткой: CSS-решение

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Просто измените 991px на 1199px для размеров md

Из-за комментария к моей публикации я скопировал css-решение за моей ссылкой выше. Я обогнал решение в своем приложении (MVC6 RC), чтобы установить другую точку останова с плавающей точкой (только применив стиль .css).
Примечание: im MVC6, вы должны добавить еще один символ @перед медиа (@@media).

Ответ 3

Если вы используете версию SASS, вы найдете эту переменную в bootstrap/_variables.scss вокруг строки 286 и далее.

Чем дальше вы спускаете этот файл, тем больше математики и параметров вы увидите.

Я публикую это, потому что люди могут приехать сюда, ища ответ SASS.

Лучше перекомпилировать ваш файл, но если вы делаете исключения из правил, может быть лучше сделать новый идентификатор или класс, чтобы ссылаться на все, что вы делаете.