Любой способ добавить точку останова в Bootstrap?
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:462 плюса
Я использую это в моем проекте:
@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
или просто используйте тот, который я использовал
Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- css Создание закругленных углов с помощью CSS
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- twitter-bootstrap В чем разница между CLASSPATH "записями начальной загрузки" и "записями пользователей" в Eclipse?
- twitter-bootstrap Что делает селектор [class ^ = "span"]?
- twitter-bootstrap How to enable scrolling of content inside a modal?
- twitter-bootstrap How to Automatically Close Alerts using Twitter Bootstrap
- twitter-bootstrap Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
- responsive-design Поддерживать соотношение сторон div с CSS
- responsive-design Проблемы с @media
- responsive-design Автоматическая высота родительского контейнера с абсолютными / фиксированными дочерними элементами
- responsive-design Простая страница начальной загрузки не реагирует на iPhone
- responsive-design Каков наилучший способ сделать макет визуализации d3.js отзывчивым?