我使用过一段时间的 Bootstrap 3
,现在需要为移动设备的水平屏幕(如 384px
屏幕宽度)制作一组新的额外小的列,并在此之后按以下方式使用:
col-xxs-1
, col-xxs-2
, col-xxs-offset-5
, hidden-xxs
等。
是否有一些适用于此目的的 Bootstrap
Less
混合器? 我不确定如何使用它们。
编辑:
有一个名为 .make-grid()
的 Bootstrap
混合器,但我无法使其工作。
我使用过一段时间的 Bootstrap 3
,现在需要为移动设备的水平屏幕(如 384px
屏幕宽度)制作一组新的额外小的列,并在此之后按以下方式使用:
col-xxs-1
, col-xxs-2
, col-xxs-offset-5
, hidden-xxs
等。
是否有一些适用于此目的的 Bootstrap
Less
混合器? 我不确定如何使用它们。
编辑:
有一个名为 .make-grid()
的 Bootstrap
混合器,但我无法使其工作。
以下是 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;
}
}
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;
}
在Extra small网格和Small网格的代码之间添加:
@media (min-width: @screen-xxs-min) {
.make-grid(xxs);
}
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
替换为@item: ~".col-xs-@{index}, .col-xxs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{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));
}
}
@media @xxs { width: @container-xxs; }
替换为 @media @xs { width: @container-xxs; }
。我也不确定为什么要使用 col-lg-0-5
等等,可能更好的方法是将 @grid-columns
设置为 24? - Bass Jobsencol-xs-3
类,这样该div的大小将与您编写col-xs-3 col-sm-3 col-md-3 col-lg-3
时相同。我希望使用我的新col-xxs
类来实现相同的行为,明白我的意思吗? - ctf0这个完整的实现(包括pull-push-offset-visible-hidden)将在v4中实现,正如@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。
其他人可能有更复杂的解决方案,但实际上有一个更简单的解决方法。因为这是最小的断点,您可以使用!important标志自己添加类,以便覆盖较大的列大小(像这样)。我使用名称col-tn-12,因为这就是Bootstrap 4推出时这个断点的名称。
@media (max-width: 480px) {
.col-tn-12 {
width: 100% !important
}
}
@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%;
}
}
@media (max-width: 480px) {
.col-xxs-pull-0 {
right: 0;
}
.col-xxs-push-0 {
left: 0;
}
.col-xxs-offset-0 {
margin-left: 0;
}
}
我在这里发布,也许对那些可能遇到这种需求的人有用。
您可以从CSS中删除列的媒体查询。这将在任何屏幕尺寸上保持列的宽度百分比。
@media (max-width: $screen-xs-min) {
@include make-grid(xxs);
}
少
@media (max-width: @screen-xs-min) {
.make-grid(xxs);
}