Я использовал Bootstrap 3 какое-то время, и теперь мне нужно создать новый набор дополнительных маленьких столбцов для горизонтальных мобильных телефонов (например, 384px ширина экрана), и после этого используйте его следующим образом:
col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs и т.д.
Существуют ли для этой цели некоторые Bootstrap Less mixins? Я не уверен, как их использовать.
изменить:
Существует микширование Bootstrap, называемое .make-grid(), но я не могу заставить его работать.
эта полная реализация (включая pull-push-offset-visible-hidden) будет реализована в версии 4, как указано @mdo
здесь https://github.com/twbs/bootstrap/issues/10203#issuecomment-23823054
и здесь https://github.com/twbs/bootstrap/pull/12893.
Возможная альтернатива размещена здесь https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision.
Код для col-xxs-x, col-xxs-offset, col-xxs-push, col-xxs-pull:
Добавить этот код:
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
@media (max-width: 384px) {
.col-xxs-1,
.col-xxs-2,
.col-xxs-3,
.col-xxs-4,
.col-xxs-5,
.col-xxs-6,
.col-xxs-7,
.col-xxs-8,
.col-xxs-9,
.col-xxs-10,
.col-xxs-11 {
float: left;
}
.col-xxs-1 {
width: 8.333333333333332%;
}
.col-xxs-2 {
width: 16.666666666666664%;
}
.col-xxs-3 {
width: 25%;
}
.col-xxs-4 {
width: 33.33333333333333%;
}
.col-xxs-5 {
width: 41.66666666666667%;
}
.col-xxs-6 {
width: 50%;
}
.col-xxs-7 {
width: 58.333333333333336%;
}
.col-xxs-8 {
width: 66.66666666666666%;
}
.col-xxs-9 {
width: 75%;
}
.col-xxs-10 {
width: 83.33333333333334%;
}
.col-xxs-11 {
width: 91.66666666666666%;
}
.col-xxs-12 {
width: 100%;
}
.col-xxs-push-1 {
left: 8.333333333333332%;
}
.col-xxs-push-2 {
left: 16.666666666666664%;
}
.col-xxs-push-3 {
left: 25%;
}
.col-xss-push-4 {
left: 33.33333333333333%;
}
.col-xxs-push-5 {
left: 41.66666666666667%;
}
.col-xxs-push-6 {
left: 50%;
}
.col-xxs-push-7 {
left: 58.333333333333336%;
}
.col-xxs-push-8 {
left: 66.66666666666666%;
}
.col-xxs-push-9 {
left: 75%;
}
.col-xxs-push-10 {
left: 83.33333333333334%;
}
.col-xxs-push-11 {
left: 91.66666666666666%;
}
.col-xxs-pull-1 {
right: 8.333333333333332%;
}
.col-xxs-pull-2 {
right: 16.666666666666664%;
}
.col-xxs-pull-3 {
right: 25%;
}
.col-xxs-pull-4 {
right: 33.33333333333333%;
}
.col-xxs-pull-5 {
right: 41.66666666666667%;
}
.col-xxs-pull-6 {
right: 50%;
}
.col-xxs-pull-7 {
right: 58.333333333333336%;
}
.col-xxs-pull-8 {
right: 66.66666666666666%;
}
.col-xxs-pull-9 {
right: 75%;
}
.col-xxs-pull-10 {
right: 83.33333333333334%;
}
.col-xxs-pull-11 {
right: 91.66666666666666%;
}
.col-xxs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xxs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xxs-offset-3 {
margin-left: 25%;
}
.col-xxs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xxs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xxs-offset-6 {
margin-left: 50%;
}
.col-xxs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xxs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xxs-offset-9 {
margin-left: 75%;
}
.col-xxs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xxs-offset-11 {
margin-left: 91.66666666666666%;
}
}
Код для hidden-xxs:
Добавить этот код:
.hidden-xxs {
display: block !important;
}
tr.hidden-xxs {
display: table-row !important;
}
th.hidden-xxs,
td.hidden-xxs {
display: table-cell !important;
}
@media (max-width: 384px) {
.hidden-xxs {
display: none !important;
}
tr.hidden-xxs {
display: none !important;
}
th.hidden-xxs,
td.hidden-xxs {
display: none !important;
}
}
@media (min-width: 385px) and (max-width: 767px) {
.hidden-xxs.hidden-xs {
display: none !important;
}
tr.hidden-xxs.hidden-xs {
display: none !important;
}
th.hidden-xxs.hidden-xs,
td.hidden-xxs.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-xxs.hidden-sm {
display: none !important;
}
tr.hidden-xxs.hidden-sm {
display: none !important;
}
th.hidden-xxs.hidden-sm,
td.hidden-xxs.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-xxs.hidden-md {
display: none !important;
}
tr.hidden-xxs.hidden-md {
display: none !important;
}
th.hidden-xxs.hidden-md,
td.hidden-xxs.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xxs.hidden-lg {
display: none !important;
}
tr.hidden-xxs.hidden-lg {
display: none !important;
}
th.hidden-xxs.hidden-lg,
td.hidden-xxs.hidden-lg {
display: none !important;
}
}
@media (max-width: 384px) {
.hidden-xs.hidden-xxs {
display: none !important;
}
tr.hidden-xs.hidden-xxs {
display: none !important;
}
th.hidden-xs.hidden-xxs,
td.hidden-xs.hidden-xxs {
display: none !important;
}
}
@media (max-width: 384px) {
.hidden-sm.hidden-xxs {
display: none !important;
}
tr.hidden-sm.hidden-xxs {
display: none !important;
}
th.hidden-sm.hidden-xxs,
td.hidden-sm.hidden-xxs {
display: none !important;
}
}
@media (max-width: 384px) {
.hidden-md.hidden-xxs {
display: none !important;
}
tr.hidden-md.hidden-xxs {
display: none !important;
}
th.hidden-md.hidden-xxs,
td.hidden-md.hidden-xxs {
display: none !important;
}
}
@media (max-width: 384px) {
.hidden-lg.hidden-xxs {
display: none !important;
}
tr.hidden-lg.hidden-xxs {
display: none !important;
}
th.hidden-lg.hidden-xxs,
td.hidden-lg.hidden-xxs {
display: none !important;
}
}
И также замените:
@media (max-width: 767px) {
с
@media (min-width: 385px) and (max-width: 767px) {
внутри bootstrap.css в этом 4-х блоках:
@media (max-width: 767px) { //line 5640 in default bootstrap.css v3.0.0
.hidden-xs {
display: none !important;
}
tr.hidden-xs {
display: none !important;
}
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
@media (max-width: 767px) { //line 5698 in default bootstrap.css v3.0.0
.hidden-sm.hidden-xs {
display: none !important;
}
tr.hidden-sm.hidden-xs {
display: none !important;
}
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
@media (max-width: 767px) { //line 5756 in default bootstrap.css v3.0.0
.hidden-md.hidden-xs {
display: none !important;
}
tr.hidden-md.hidden-xs {
display: none !important;
}
th.hidden-md.hidden-xs,
td.hidden-md.hidden-xs {
display: none !important;
}
}
@media (max-width: 767px) { //line 5814 in default bootstrap.css v3.0.0
.hidden-lg.hidden-xs {
display: none !important;
}
tr.hidden-lg.hidden-xs {
display: none !important;
}
th.hidden-lg.hidden-xs,
td.hidden-lg.hidden-xs {
display: none !important;
}
}
Код для visible-xxs:
Добавить этот код:
.visible-xxs {
display: none !important;
}
tr.visible-xxs {
display: none !important;
}
th.visible-xxs,
td.visible-xxs {
display: none !important;
}
@media (max-width: 384px) {
.visible-xxs {
display: block !important;
}
tr.visible-xxs {
display: table-row !important;
}
th.visible-xxs,
td.visible-xxs {
display: table-cell !important;
}
}
@media (min-width: 385px) and (max-width: 767px) {
.visible-xxs.visible-xs {
display: block !important;
}
tr.visible-xxs.visible-xs {
display: table-row !important;
}
th.visible-xxs.visible-xs,
td.visible-xxs.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-xxs.visible-sm {
display: block !important;
}
tr.visible-xxs.visible-sm {
display: table-row !important;
}
th.visible-xxs.visible-sm,
td.visible-xxs.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-xxs.visible-md {
display: block !important;
}
tr.visible-xxs.visible-md {
display: table-row !important;
}
th.visible-xxs.visible-md,
td.visible-xxs.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-xxs.visible-lg {
display: block !important;
}
tr.visible-xxs.visible-lg {
display: table-row !important;
}
th.visible-xxs.visible-lg,
td.visible-xxs.visible-lg {
display: table-cell !important;
}
}
@media (max-width: 384px) {
.visible-xs.visible-xxs {
display: block !important;
}
tr.visible-xs.visible-xxs {
display: table-row !important;
}
th.visible-xs.visible-xxs,
td.visible-xs.visible-xxs {
display: table-cell !important;
}
}
@media (max-width: 384px) {
.visible-sm.visible-xxs {
display: block !important;
}
tr.visible-sm.visible-xxs {
display: table-row !important;
}
th.visible-sm.visible-xxs,
td.visible-sm.visible-xxs {
display: table-cell !important;
}
}
@media (max-width: 384px) {
.visible-md.visible-xxs {
display: block !important;
}
tr.visible-md.visible-xxs {
display: table-row !important;
}
th.visible-md.visible-xxs,
td.visible-md.visible-xxs {
display: table-cell !important;
}
}
@media (max-width: 384px) {
.visible-lg.visible-xxs {
display: block !important;
}
tr.visible-lg.visible-xxs {
display: table-row !important;
}
th.visible-lg.visible-xxs,
td.visible-lg.visible-xxs {
display: table-cell !important;
}
}
И также замените:
@media (max-width: 767px) {
с
@media (min-width: 385px) and (max-width: 767px) {
внутри bootstrap.css в этом 4-х блоках:
@media (max-width: 767px) { //line 5408 in default bootstrap.css v3.0.0
.visible-xs {
display: block !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) { //line 5466 in default bootstrap.css v3.0.0
.visible-sm.visible-xs {
display: block !important;
}
tr.visible-sm.visible-xs {
display: table-row !important;
}
th.visible-sm.visible-xs,
td.visible-sm.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) { //line 5524 in default bootstrap.css v3.0.0
.visible-md.visible-xs {
display: block !important;
}
tr.visible-md.visible-xs {
display: table-row !important;
}
th.visible-md.visible-xs,
td.visible-md.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) { //line 5582 in default bootstrap.css v3.0.0
.visible-lg.visible-xs {
display: block !important;
}
tr.visible-lg.visible-xs {
display: table-row !important;
}
th.visible-lg.visible-xs,
td.visible-lg.visible-xs {
display: table-cell !important;
}
}
Обратите внимание, что Bootstrap CSS использует мобильную первую стратегию, поэтому важно определить вашу xxs-сетку (я должен выбрать другое имя) после xs-grid, но до sm-grid. См. Также: Bootstrap 3 mixin multiple make - * - column.
По этой причине вы не можете использовать код Less из этого вопроса Бутстрап 3 дополнительных больших (xl) столбца
less/variables.less добавить:-
// horizontal mobiles
@screen-xxs-min: 384px;
@container-xxs: (336px + @grid-gutter-width);
less/grid.less измените класс .container следующим образом:-
.container {
.container-fixed();
@media (min-width: @screen-xxs-min) {
width: @container-xxs;
}
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
и между дополнительной сеткой и маленьким кодом сетки add:
@media (min-width: @screen-xxs-min) {
.make-grid(xxs);
}
@item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}"; на @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}";И, наконец, запустите grunt dist
/less/mixins/grid.less-
// Generate the small columns
.make-xxs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-xxs-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-xxs-column-offset(@columns) {
@media (min-width: @screen-xxs-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-xxs-column-push(@columns) {
@media (min-width: @screen-xxs-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-xxs-column-pull(@columns) {
@media (min-width: @screen-xxs-min) {
right: percentage((@columns / @grid-columns));
}
}
используя код из альтернативного github, который отправил @facundo, я переключил первую строку с минимальной ширины 480 пикселей на минимальную ширину 0 и максимальную ширину 480 пикселей и, похоже, работал для того, что мне нужно без использования каких-либо других кодировок или файлов:
@media (min-width: 0px) and (max-width:480px){
.col-xs-B-1, .col-xs-B-2, .col-xs-B-3, .col-xs-B-4, .col-xs-B-5, .col-xs-B-6, .col-xs-B-7, .col-xs-B-8, .col-xs-B-9, .col-xs-B-10, .col-xs-B-11, .col-xs-B-12 {
float: left;
}
.col-xs-B-12 {
width: 100%;
}
.col-xs-B-11 {
width: 91.66666667%;
}
.col-xs-B-10 {
width: 83.33333333%;
}
.col-xs-B-9 {
width: 75%;
}
.col-xs-B-8 {
width: 66.66666667%;
}
.col-xs-B-7 {
width: 58.33333333%;
}
.col-xs-B-6 {
width: 50%;
}
.col-xs-B-5 {
width: 41.66666667%;
}
.col-xs-B-4 {
width: 33.33333333%;
}
.col-xs-B-3 {
width: 25%;
}
.col-xs-B-2 {
width: 16.66666667%;
}
.col-xs-B-1 {
width: 8.33333333%;
}
.col-xs-B-pull-12 {
right: 100%;
}
.col-xs-B-pull-11 {
right: 91.66666667%;
}
.col-xs-B-pull-10 {
right: 83.33333333%;
}
.col-xs-B-pull-9 {
right: 75%;
}
.col-xs-B-pull-8 {
right: 66.66666667%;
}
.col-xs-B-pull-7 {
right: 58.33333333%;
}
.col-xs-B-pull-6 {
right: 50%;
}
.col-xs-B-pull-5 {
right: 41.66666667%;
}
.col-xs-B-pull-4 {
right: 33.33333333%;
}
.col-xs-B-pull-3 {
right: 25%;
}
.col-xs-B-pull-2 {
right: 16.66666667%;
}
.col-xs-B-pull-1 {
right: 8.33333333%;
}
.col-xs-B-pull-0 {
right: 0%;
}
.col-xs-B-push-12 {
left: 100%;
}
.col-xs-B-push-11 {
left: 91.66666667%;
}
.col-xs-B-push-10 {
left: 83.33333333%;
}
.col-xs-B-push-9 {
left: 75%;
}
.col-xs-B-push-8 {
left: 66.66666667%;
}
.col-xs-B-push-7 {
left: 58.33333333%;
}
.col-xs-B-push-6 {
left: 50%;
}
.col-xs-B-push-5 {
left: 41.66666667%;
}
.col-xs-B-push-4 {
left: 33.33333333%;
}
.col-xs-B-push-3 {
left: 25%;
}
.col-xs-B-push-2 {
left: 16.66666667%;
}
.col-xs-B-push-1 {
left: 8.33333333%;
}
.col-xs-B-push-0 {
left: 0%;
}
.col-xs-B-offset-12 {
margin-left: 100%;
}
.col-xs-B-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-B-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-B-offset-9 {
margin-left: 75%;
}
.col-xs-B-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-B-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-B-offset-6 {
margin-left: 50%;
}
.col-xs-B-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-B-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-B-offset-3 {
margin-left: 25%;
}
.col-xs-B-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-B-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-B-offset-0 {
margin-left: 0%;
}
}
У других есть более сложные решения, но на самом деле существует более простое решение. Поскольку это наименьшая точка останова, вы можете просто добавить класс самостоятельно с помощью важного флага, чтобы он перекрывал большие размеры столбцов (например, это). Я использую имя col-tn-12, потому что это то, что эта точка останова будет вызываться при выкачивании Bootstrap 4.
@media (max-width: 480px) {
.col-tn-12 {
width: 100% !important
}
}
Спасибо paulalexandru за это отличное и очень полезное решение. Недавно мне нужно было использовать опцию смещения реселлера (col-xxs-offset-0) на самых маленьких экранах, поэтому мне пришлось добавить эти несколько строк, так как это хорошо работает:
@media (max-width: 480px) {
.col-xxs-pull-0 {
right: 0;
}
.col-xxs-push-0 {
left: 0;
}
.col-xxs-offset-0 {
margin-left: 0;
}
}
Я размещаю его здесь, возможно, было бы полезно, если бы они тоже столкнулись с этой проблемой.
Вы можете просто удалить медиа-запросы для столбцов из css. Это создавало бы ширину precentage столбцов на любом размере экрана.
Для этого вы можете использовать следующее. Я лично связываюсь с загрузочным CDN в моих проектах и сохраняю локальную версию бутстрапа, поэтому я могу использовать свои микшины для своих стилей, связанных с сайтом, где я бы разместил следующее...
SCSS
@media (max-width: $screen-xs-min) {
@include make-grid(xxs);
}
Меньше
@media (max-width: @screen-xs-min) {
.make-grid(xxs);
}