Bootstrap 3:添加一组新列 [英] Bootstrap 3: adding a new set of columns
问题描述
我使用Bootstrap 3
已有一段时间了,现在我需要为水平移动设备制作一组新的超小列(例如384px
屏幕宽度),然后按以下方式使用它:
I've been using Bootstrap 3
for a while and now I need to make a new set of extra small columns for horizontal mobiles (e.g. 384px
screen width) and after this use it as follows:
col-xxs-1
,col-xxs-2
,col-xxs-offset-5
,hidden-xxs
等
是否有一些Bootstrap
Less
mixins用于此目的?我不确定如何使用它们
Are there some Bootstrap
Less
mixins for this purpose? I'm not sure how to use them
有一个名为.make-grid()
的Bootstrap
混合,但我无法使其正常工作.
There is a Bootstrap
mixin called .make-grid()
, but I can't make it work.
推荐答案
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 3:添加一组新列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!