当前位置：theitroad>twitter-bootstrap Bootstrap 3：添加一组新的列

twitter-bootstrap Bootstrap 3：添加一组新的列

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/24066059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 20:54:41 　来源:igfitidea点击:

Bootstrap 3: adding a new set of columns

twitter-bootstraptwitter-bootstrap-3lessmixins

提问by Facundo Colombier

I've been using Bootstrap 3for a while and now I need to make a new set of extra small columns for horizontal mobiles (e.g. 384pxscreen width) and after this use it as follows:

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

col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs, etc.

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

Are there some BootstrapLessmixins for this purpose? I'm not sure how to use them

是否有一些BootstrapLess混合用于这个目的？我不确定如何使用它们

edit:

编辑：

There is a Bootstrapmixin called .make-grid(), but I can't make it work.

有一个Bootstrapmixin 叫做.make-grid()，但我不能让它工作。

回答by paulalexandru

Code for col-xxs-x,col-xxs-offset,col-xxs-push,col-xxs-pull:

col-xxs-x, col-xxs-offset, col-xxs-push, 的代码col-xxs-pull：

Add this code:

添加此代码：

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

Code for hidden-xxs:

代码hidden-xxs：

Add this code:

添加此代码：

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

And also replace :

并替换：

@media (max-width: 767px) {

with:

和：

@media (min-width: 385px) and (max-width: 767px) {

inside bootstrap.css at this 4 blocks:

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

Code for visible-xxs:

代码visible-xxs：

Add this code:

添加此代码：

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

}

And also replace :

并替换：

@media (max-width: 767px) {

with:

和：

@media (min-width: 385px) and (max-width: 767px) {

inside bootstrap.css at this 4 blocks:

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

回答by Bass Jobsen

Notice that Bootstrap's CSS uses a mobile first strategy, so it is important to define your xxs-grid (i should choose an other name) after the xs-grid but before the sm-grid. See also: Bootstrap 3 mixin multiple make-*-column.

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

For that reason you can not use the Less code from this question Bootstrap 3 extra large (xl) columns

因此，您不能使用此问题Bootstrap 3 extra large (xl) columns 中的 Less 代码

  1. Download the Bootstrap source code at: http://getbootstrap.com/getting-started/
  2. in less/variables.lessadd:
  1. 下载 Bootstrap 源代码：http: //getbootstrap.com/getting-started/
  2. 另外less/variables.less：

-

——

// horizontal mobiles
@screen-xxs-min:             384px;
@container-xxs: (336px + @grid-gutter-width);
  1. Open less/grid.lesschange the .containerclass as follows:
  1. 打开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;
  }

and between the Extra small grid and Small grid code add:

并在 Extra small grid 和 Small grid 代码之间添加：

@media (min-width: @screen-xxs-min) {
  .make-grid(xxs);
}
  1. In the 'less/mixins/grid-framework.less' file replace twice @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";with @item: ~".col-xs-@{index}, .col-xxs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";

  2. And finally run grunt dist

    1. (optional) add the following code to the /less/mixins/grid.lessfile
  1. 在“少/混入/网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文件中

-

——

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

回答by Facundo Colombier

this full implementation (including pull-push-offset-visible-hidden) will be implemented in v4 as mentioned by @mdo

正如@mdo提到的，这个完整的实现（包括 pull-push-offset-visible-hidden）将在 v4 中实现

here https://github.com/twbs/bootstrap/issues/10203#issuecomment-23823054

这里https://github.com/twbs/bootstrap/issues/10203#issuecomment-23823054

and here https://github.com/twbs/bootstrap/pull/12893.

在这里https://github.com/twbs/bootstrap/pull/12893。

A posible alternative is posted here https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision.

一个可能的替代方案在这里发布https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision。

回答by Jacob Beasley

Others have more complex solutions, but really there is an easier solution. Because this is the smallest break point, you can just add the class yourself with the !important flag so that it overrides the larger column sizes (like this). I use the name col-tn-12 because that is what this break point will be called when Bootstrap 4 is rolled out.

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

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

回答by Dm Parrish

using the code from the alternative github that @facundo posted, I switched the first line from a min-width of 480px to a min-width of 0 and a max-width of 480px and it seemed to work for what I needed without having to use any other coding or files:

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

回答by developpeuse web

Thanks paulalexandru for this excellent and very usefull solution. I recently need to use the reseting offset option (col-xxs-offset-0) on smallest screens, so I had to add those few lines for it works well :

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

I post it here, maybe it would be usefull for thoses who may encounter this need too.

我把它贴在这里，也许它对那些可能也遇到这种需求的人有用。

回答by Roberto Contardo Wirth

You could just remove the media queries for the columns from the css. That would mantain the width precentage of the columns on any screen size.

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

回答by Adam Youngers

You can use the following to accomplish this. I personally link to the bootstrap CDN in my projects and keep a local version of bootstrap so I can tap into its mixins for my site specific styles which is where I would place the following...

您可以使用以下方法来完成此操作。我个人在我的项目中链接到引导 CDN 并保留引导的本地版本，这样我就可以为我的站点特定样式利用它的混合，这是我将放置以下内容的地方...

SCSS

社会保障局

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

Less

较少的

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

相关推荐

twitter-bootstrap Bootstrap 自定义网格列

twitter-bootstrap Bootstrap 自定义网格列

twitter-bootstrap 在引导程序中访问折叠导航菜单的样式

twitter-bootstrap 在引导程序中访问折叠导航菜单的样式

twitter-bootstrap Bootstrap 模态对话框，show.bs.modal 事件相关目标未定义。如何获得点击元素？

twitter-bootstrap Bootstrap 模态对话框，show.bs.modal 事件相关目标未定义。如何获得点击元素？

twitter-bootstrap 面板展开和按钮出现在每个表行 - MVC 5/Bootstrap 3

twitter-bootstrap 面板展开和按钮出现在每个表行 - MVC 5/Bootstrap 3

相关推荐
最近更新
标签