Bootstrap 3：添加一组新列

时间：2014-06-05 17:02:35

标签： twitter-bootstrap twitter-bootstrap-3 less mixins

我已经使用Bootstrap 3一段时间了，现在我需要为水平移动设备创建一组新的额外小列（例如384px屏幕宽度），然后将其用作如下：

col-xxs-1，col-xxs-2，col-xxs-offset-5，hidden-xxs等。

为此目的，是否有一些Bootstrap Less个混音？我不确定如何使用它们

编辑：

有一个名为Bootstrap的{​​{1}}混音，但我无法正常使用。

8 个答案:

答案 0 :(得分：39)

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) {

在这4个街区的bootstrap.css内： 

@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) {

在这4个街区的bootstrap.css内： 

@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;
  }
}

答案 1 :(得分：11)

请注意，Bootstrap的CSS使用移动优先策略，因此在xs-grid之后但在sm-grid之前定义xxs-grid（我应该选择另一个名称）很重要。另见：Bootstrap 3 mixin multiple make-*-column。

因此，您无法使用此问题中的较少代码Bootstrap 3 extra large (xl) columns

  1. 从以下位置下载Bootstrap源代码：http://getbootstrap.com/getting-started/
  2. 在less/variables.less添加：

    3. - 

    // horizontal mobiles
@screen-xxs-min:             384px;
@container-xxs: (336px + @grid-gutter-width);
    1. 打开less/grid.less按如下方式更改.container课程：

      2. - 

      .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小网格和小网格代码之间添加：

      @media (min-width: @screen-xxs-min) {
  .make-grid(xxs);
}
      1. 在'less / mixins / grid-framework.less'文件中，用@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}";

      2. 最后运行grunt dist

        1. （可选）将以下代码添加到/less/mixins/grid.less文件

        3. - 

        // 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));
  }
}

答案 2 :(得分：3)

如@mdo

所述，这个完整的实现（包括pull-push-offset-visible-hidden）将在v4中实现。

此处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。

答案 3 :(得分：2)

其他人有更复杂的解决方案，但实际上有一个更简单的解决方案。因为这是最小的断点，所以您可以使用！important标志自己添加类，以便它覆盖较大的列大小（如下所示）。我使用名称col-tn-12，因为在推出Bootstrap 4时将调用此断点。 

@media (max-width: 480px) {
    .col-tn-12 {
        width: 100% !important
    }
}

答案 4 :(得分：1)

使用@facundo发布的替代github中的代码，我将第一行从最小宽度480px切换到最小宽度0，最大宽度为480px，它似乎适用于我需要的东西无需使用任何其他编码或文件：

   @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%;
  }
}

答案 5 :(得分：0)

感谢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;
    }
}

我在这里发布，也许对那些可能遇到这种需求的人来说也是有用的。

答案 6 :(得分：-1)

您可以从css中删除列的媒体查询。这将保留任何屏幕尺寸上列的宽度百分比。

答案 7 :(得分：-2)

您可以使用以下内容来完成此操作。我个人链接到我的项目中的bootstrap CDN并保留一个本地版本的bootstrap所以我可以利用它的mixins来获取我的网站特定样式，这就是我要放置以下内容...

SCSS 

@media (max-width: $screen-xs-min) {
  @include make-grid(xxs);
}

少

@media (max-width: @screen-xs-min) {
  .make-grid(xxs);
}
相关问题
最新问题