markdown 布尔玛响应网格偏移修改器。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 布尔玛响应网格偏移修改器。相关的知识，希望对你有一定的参考价值。
/* Bulma grid responsive offset modifiers by afflexux */
/* bulma.io ** github.com/afflexux */
/* Mobile */
@media screen and (max-width: 768px) {
.is-offset-12-mobile {
margin-left: 100%;
}
.is-offset-11-mobile {
margin-left: 91.66666667%;
}
.is-offset-10-mobile {
margin-left: 83.33333333%;
}
.is-offset-9-mobile {
margin-left: 75%;
}
.is-offset-8-mobile {
margin-left: 66.66666667%;
}
.is-offset-7-mobile {
margin-left: 58.33333333%;
}
.is-offset-6-mobile {
margin-left: 50%;
}
.is-offset-5-mobile {
margin-left: 41.66666667%;
}
.is-offset-4-mobile {
margin-left: 33.33333333%;
}
.is-offset-3-mobile {
margin-left: 25%;
}
.is-offset-2-mobile {
margin-left: 16.66666667%;
}
.is-offset-1-mobile {
margin-left: 8.33333333%;
}
.is-offset-0-mobile {
margin-left: 0;
}
.is-offset-three-quarters-mobile {
margin-left: 75%;
}
.is-offset-two-thirds-mobile {
margin-left: 66.6666%;
}
.is-offset-half-mobile {
margin-left: 50%;
}
.is-offset-one-third-mobile {
margin-left: 33.3333%;
}
.is-offset-one-quarter-mobile {
margin-left: 25%;
}
.is-offset-one-fifth-mobile {
margin-left: 20%;
}
.is-offset-two-fifths-mobile {
margin-left: 40%;
}
.is-offset-three-fifths-mobile {
margin-left: 60%;
}
.is-offset-four-fifths-mobile {
margin-left: 80%;
}
}
/* Tablet */
/* @media screen and (min-width: 769px) {
.is-offset-12-tablet {
margin-left: 100%;
}
.is-offset-11-tablet {
margin-left: 91.66666667%;
}
.is-offset-10-tablet {
margin-left: 83.33333333%;
}
.is-offset-9-tablet {
margin-left: 75%;
}
.is-offset-8-tablet {
margin-left: 66.66666667%;
}
.is-offset-7-tablet {
margin-left: 58.33333333%;
}
.is-offset-6-tablet {
margin-left: 50%;
}
.is-offset-5-tablet {
margin-left: 41.66666667%;
}
.is-offset-4-tablet {
margin-left: 33.33333333%;
}
.is-offset-3-tablet {
margin-left: 25%;
}
.is-offset-2-tablet {
margin-left: 16.66666667%;
}
.is-offset-1-tablet {
margin-left: 8.33333333%;
}
.is-offset-0-tablet {
margin-left: 0;
}
.is-offset-three-quarters-tablet {
margin-left: 75%;
}
.is-offset-two-thirds-tablet {
margin-left: 66.6666%;
}
.is-offset-half-tablet {
margin-left: 50%;
}
.is-offset-one-third-tablet {
margin-left: 33.3333%;
}
.is-offset-one-quarter-tablet {
margin-left: 25%;
}
.is-offset-one-fifth-tablet {
margin-left: 20%;
}
.is-offset-two-fifths-tablet {
margin-left: 40%;
}
.is-offset-three-fifths-tablet {
margin-left: 60%;
}
.is-offset-four-fifths-tablet {
margin-left: 80%;
}
} */
/* Tablet ONLY */
@media screen and (min-width: 769px) and (max-width: 1023px) {
.is-offset-12-tablet-only {
margin-left: 100%;
}
.is-offset-11-tablet-only {
margin-left: 91.66666667%;
}
.is-offset-10-tablet-only {
margin-left: 83.33333333%;
}
.is-offset-9-tablet-only {
margin-left: 75%;
}
.is-offset-8-tablet-only {
margin-left: 66.66666667%;
}
.is-offset-7-tablet-only {
margin-left: 58.33333333%;
}
.is-offset-6-tablet-only {
margin-left: 50%;
}
.is-offset-5-tablet-only {
margin-left: 41.66666667%;
}
.is-offset-4-tablet-only {
margin-left: 33.33333333%;
}
.is-offset-3-tablet-only {
margin-left: 25%;
}
.is-offset-2-tablet-only {
margin-left: 16.66666667%;
}
.is-offset-1-tablet-only {
margin-left: 8.33333333%;
}
.is-offset-0-tablet-only {
margin-left: 0;
}
.is-offset-three-quarters-tablet-only {
margin-left: 75%;
}
.is-offset-two-thirds-tablet-only {
margin-left: 66.6666%;
}
.is-offset-half-tablet-only {
margin-left: 50%;
}
.is-offset-one-third-tablet-only {
margin-left: 33.3333%;
}
.is-offset-one-quarter-tablet-only {
margin-left: 25%;
}
.is-offset-one-fifth-tablet-only {
margin-left: 20%;
}
.is-offset-two-fifths-tablet-only {
margin-left: 40%;
}
.is-offset-three-fifths-tablet-only {
margin-left: 60%;
}
.is-offset-four-fifths-tablet-only {
margin-left: 80%;
}
}
/* Touch */
@media screen and (max-width: 1023px) {
.is-offset-12-touch {
margin-left: 100%;
}
.is-offset-11-touch {
margin-left: 91.66666667%;
}
.is-offset-10-touch {
margin-left: 83.33333333%;
}
.is-offset-9-touch {
margin-left: 75%;
}
.is-offset-8-touch {
margin-left: 66.66666667%;
}
.is-offset-7-touch {
margin-left: 58.33333333%;
}
.is-offset-6-touch {
margin-left: 50%;
}
.is-offset-5-touch {
margin-left: 41.66666667%;
}
.is-offset-4-touch {
margin-left: 33.33333333%;
}
.is-offset-3-touch {
margin-left: 25%;
}
.is-offset-2-touch {
margin-left: 16.66666667%;
}
.is-offset-1-touch {
margin-left: 8.33333333%;
}
.is-offset-0-touch {
margin-left: 0;
}
.is-offset-three-quarters-touch {
margin-left: 75%;
}
.is-offset-two-thirds-touch {
margin-left: 66.6666%;
}
.is-offset-half-touch {
margin-left: 50%;
}
.is-offset-one-third-touch {
margin-left: 33.3333%;
}
.is-offset-one-quarter-touch {
margin-left: 25%;
}
.is-offset-one-fifth-touch {
margin-left: 20%;
}
.is-offset-two-fifths-touch {
margin-left: 40%;
}
.is-offset-three-fifths-touch {
margin-left: 60%;
}
.is-offset-four-fifths-touch {
margin-left: 80%;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.is-offset-12-desktop {
margin-left: 100%;
}
.is-offset-11-desktop {
margin-left: 91.66666667%;
}
.is-offset-10-desktop {
margin-left: 83.33333333%;
}
.is-offset-9-desktop {
margin-left: 75%;
}
.is-offset-8-desktop {
margin-left: 66.66666667%;
}
.is-offset-7-desktop {
margin-left: 58.33333333%;
}
.is-offset-6-desktop {
margin-left: 50%;
}
.is-offset-5-desktop {
margin-left: 41.66666667%;
}
.is-offset-4-desktop {
margin-left: 33.33333333%;
}
.is-offset-3-desktop {
margin-left: 25%;
}
.is-offset-2-desktop {
margin-left: 16.66666667%;
}
.is-offset-1-desktop {
margin-left: 8.33333333%;
}
.is-offset-0-desktop {
margin-left: 0;
}
.is-offset-three-quarters-desktop {
margin-left: 75%;
}
.is-offset-two-thirds-desktop {
margin-left: 66.6666%;
}
.is-offset-half-desktop {
margin-left: 50%;
}
.is-offset-one-third-desktop {
margin-left: 33.3333%;
}
.is-offset-one-quarter-desktop {
margin-left: 25%;
}
.is-offset-one-fifth-desktop {
margin-left: 20%;
}
.is-offset-two-fifths-desktop {
margin-left: 40%;
}
.is-offset-three-fifths-desktop {
margin-left: 60%;
}
.is-offset-four-fifths-desktop {
margin-left: 80%;
}
}
/* Desktop Only */
@media screen and (min-width: 1024px) and (max-width: 1215px) {
.is-offset-12-desktop-only {
margin-left: 100%;
}
.is-offset-11-desktop-only {
margin-left: 91.66666667%;
}
.is-offset-10-desktop-only {
margin-left: 83.33333333%;
}
.is-offset-9-desktop-only {
margin-left: 75%;
}
.is-offset-8-desktop-only {
margin-left: 66.66666667%;
}
.is-offset-7-desktop-only {
margin-left: 58.33333333%;
}
.is-offset-6-desktop-only {
margin-left: 50%;
}
.is-offset-5-desktop-only {
margin-left: 41.66666667%;
}
.is-offset-4-desktop-only {
margin-left: 33.33333333%;
}
.is-offset-3-desktop-only {
margin-left: 25%;
}
.is-offset-2-desktop-only {
margin-left: 16.66666667%;
}
.is-offset-1-desktop-only {
margin-left: 8.33333333%;
}
.is-offset-0-desktop-only {
margin-left: 0;
}
.is-offset-three-quarters-desktop-only {
margin-left: 75%;
}
.is-offset-two-thirds-desktop-only {
margin-left: 66.6666%;
}
.is-offset-half-desktop-only {
margin-left: 50%;
}
.is-offset-one-third-desktop-only {
margin-left: 33.3333%;
}
.is-offset-one-quarter-desktop-only {
margin-left: 25%;
}
.is-offset-one-fifth-desktop-only {
margin-left: 20%;
}
.is-offset-two-fifths-desktop-only {
margin-left: 40%;
}
.is-offset-three-fifths-desktop-only {
margin-left: 60%;
}
.is-offset-four-fifths-desktop-only {
margin-left: 80%;
}
}
/* Widescreen */
@media screen and (min-width: 1216px) {
.is-offset-12-widescreen {
margin-left: 100%;
}
.is-offset-11-widescreen {
margin-left: 91.66666667%;
}
.is-offset-10-widescreen {
margin-left: 83.33333333%;
}
.is-offset-9-widescreen {
margin-left: 75%;
}
.is-offset-8-widescreen {
margin-left: 66.66666667%;
}
.is-offset-7-widescreen {
margin-left: 58.33333333%;
}
.is-offset-6-widescreen {
margin-left: 50%;
}
.is-offset-5-widescreen {
margin-left: 41.66666667%;
}
.is-offset-4-widescreen {
margin-left: 33.33333333%;
}
.is-offset-3-widescreen {
margin-left: 25%;
}
.is-offset-2-widescreen {
margin-left: 16.66666667%;
}
.is-offset-1-widescreen {
margin-left: 8.33333333%;
}
.is-offset-0-widescreen {
margin-left: 0;
}
.is-offset-three-quarters-widescreen {
margin-left: 75%;
}
.is-offset-two-thirds-widescreen {
margin-left: 66.6666%;
}
.is-offset-half-widescreen {
margin-left: 50%;
}
.is-offset-one-third-widescreen {
margin-left: 33.3333%;
}
.is-offset-one-quarter-widescreen {
margin-left: 25%;
}
.is-offset-one-fifth-widescreen {
margin-left: 20%;
}
.is-offset-two-fifths-widescreen {
margin-left: 40%;
}
.is-offset-three-fifths-widescreen {
margin-left: 60%;
}
.is-offset-four-fifths-widescreen {
margin-left: 80%;
}
}
/* Widescreen Only */
@media screen and (min-width: 1216px) and (max-width: 1407px) {
.is-offset-12-widescreen-only {
margin-left: 100%;
}
.is-offset-11-widescreen-only {
margin-left: 91.66666667%;
}
.is-offset-10-widescreen-only {
margin-left: 83.33333333%;
}
.is-offset-9-widescreen-only {
margin-left: 75%;
}
.is-offset-8-widescreen-only {
margin-left: 66.66666667%;
}
.is-offset-7-widescreen-only {
margin-left: 58.33333333%;
}
.is-offset-6-widescreen-only {
margin-left: 50%;
}
.is-offset-5-widescreen-only {
margin-left: 41.66666667%;
}
.is-offset-4-widescreen-only {
margin-left: 33.33333333%;
}
.is-offset-3-widescreen-only {
margin-left: 25%;
}
.is-offset-2-widescreen-only {
margin-left: 16.66666667%;
}
.is-offset-1-widescreen-only {
margin-left: 8.33333333%;
}
.is-offset-0-widescreen-only {
margin-left: 0;
}
.is-offset-three-quarters-widescreen-only {
margin-left: 75%;
}
.is-offset-two-thirds-widescreen-only {
margin-left: 66.6666%;
}
.is-offset-half-widescreen-only {
margin-left: 50%;
}
.is-offset-one-third-widescreen-only {
margin-left: 33.3333%;
}
.is-offset-one-quarter-widescreen-only {
margin-left: 25%;
}
.is-offset-one-fifth-widescreen-only {
margin-left: 20%;
}
.is-offset-two-fifths-widescreen-only {
margin-left: 40%;
}
.is-offset-three-fifths-widescreen-only {
margin-left: 60%;
}
.is-offset-four-fifths-widescreen-only {
margin-left: 80%;
}
}
/* Full HD */
@media screen and (min-width: 1408px) {
.is-offset-12-tablet {
margin-left: 100%;
}
.is-offset-11-full-hd {
margin-left: 91.66666667%;
}
.is-offset-10-full-hd {
margin-left: 83.33333333%;
}
.is-offset-9-full-hd {
margin-left: 75%;
}
.is-offset-8-full-hd {
margin-left: 66.66666667%;
}
.is-offset-7-full-hd {
margin-left: 58.33333333%;
}
.is-offset-6-full-hd {
margin-left: 50%;
}
.is-offset-5-full-hd {
margin-left: 41.66666667%;
}
.is-offset-4-full-hd {
margin-left: 33.33333333%;
}
.is-offset-3-full-hd {
margin-left: 25%;
}
.is-offset-2-full-hd {
margin-left: 16.66666667%;
}
.is-offset-1-full-hd {
margin-left: 8.33333333%;
}
.is-offset-0-full-hd {
margin-left: 0;
}
.is-offset-three-quarters-fullhd {
margin-left: 75%;
}
.is-offset-two-thirds-fullhd {
margin-left: 66.6666%;
}
.is-offset-half-fullhd {
margin-left: 50%;
}
.is-offset-one-third-fullhd {
margin-left: 33.3333%;
}
.is-offset-one-quarter-fullhd {
margin-left: 25%;
}
.is-offset-one-fifth-fullhd {
margin-left: 20%;
}
.is-offset-two-fifths-fullhd {
margin-left: 40%;
}
.is-offset-three-fifths-fullhd {
margin-left: 60%;
}
.is-offset-four-fifths-fullhd {
margin-left: 80%;
}
}**This has been modified and improved in the SASS version in my Gists.**
Bulma grid responsive offset modifiers by afflexux
https://bulma.io/
https://github.com/afflexux
https://github.com/jgthms/bulma/issues/1186
I found this issue while struggling with the same problem so wrote the following CSS.
The modifiers follow bulma syntax for responsive grid modifiers.
eg. is-offset-5-widescreen
is-offset-one-quarter-desktop
Offsets run from 0-12 and also the semantic fraction modifiers. ie. one-quarter two-fifths.
As in Bulma, it is mobile first so is-offset-[number/fraction]-tablet is offset on tablet and above.
As in Bulma there are modifiers -only ie. is-offset-{number/fraction]-desktop-only.
These are offset on the selected viewport only.
Mobile sizes are included but probably not massively useful as mobile grids are collapsed.
I have kept these uncommented as they may help somewhere.
Tablet sizes are included but have been commented out as these are native in Bulma,
they may cause conflicts, although not for me.
Tablet-only has been left in as Bulma does not have these natively.
I hope this helps some people out. Bulma is a fantastic framework.
I'm fairly new to CSS so let me know if anything could be done better. ie. SCSS.
Thanks.以上是关于markdown 布尔玛响应网格偏移修改器。的主要内容，如果未能解决你的问题，请参考以下文章