Twitter 的 Bootstrap 3.x 语义移动网格 [英] Twitter's Bootstrap 3.x semantic mobile grid

问题描述

阅读新的(未完成)Bootstrap 3 文档后，我想知道如何创建语义移动网格.

简而言之.如何转换:

<div class="col col-lg-6 col-sm-6">6</div><div class="col col-lg-6 col-sm-6">6</div>

为此并保留小的移动网格:

<div class="left">6</div><div class="right">6</div>

少

.wrapper { .make-row();}.left { .make-column(6);//这只会创建大网格 }.right { .make-column(6);}

解决方案

如果我很好地理解了你的问题，我认为你应该使用:

<打击>
<代码>

<div class="col-span-6 col-small-span-6">6</div><div class="col-span-6 col-small-span-6">6</div>

其中 col-span-6 是大网格的类，col-small-span-6 是小网格的类.如果你离开 col-small-span-6 你的 div 将堆叠.小网格不使用 col-span-* 类.

另见:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

从现在开始，Twitter 的 Bootstrap 定义了三个网格:手机的小网格(<480px)、平板电脑的小网格(<768px)和 Destkops 的中大网格(>768px).这些网格的行类前缀是.col-"、.col-sm-"和.col-lg-".中大网格将在 768 像素屏幕宽度以下堆叠.480 像素以下的小网格也是如此，并且小网格永远不会堆叠.

所以你的 html 应该是:

<div class="col-6 col-lg-6 col-sm-6">6</div><div class="col-6 col-lg-6 col-sm-6">6</div>

少最新版本:https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip 不再包含 .make-small-column 函数. 另见:https://github.com/twbs/bootstrap/pull/8302 .make-column() 将为最小宽度添加媒体查询: @grid-float-breakpoint 所以在小网格上你的列将总是使用这个函数堆叠.

你可以试试:

//生成小列.make-small-column(@columns) {位置:相对；向左飘浮;//防止列在空时折叠最小高度:1px；//通过内边距填充padding-left: (@grid-gutter-width/2);padding-right: (@grid-gutter-width/2);@max : (@grid-float-breakpoint - 1 );//根据可用列数计算宽度@media(最大宽度:@max){宽度:百分比((@columns/@grid-columns))；}}.wrapper { .make-row();}.left { .make-column(6);.make-small-column(6);}.right { .make-column(6);.make-small-column(6);}

更新

以上答案将基于 Twitter Bootstrap 3 的候选发布版本.Twitter Bootstrap 3 的最终版本有 4 个网格超小 (xs)、小 (sm)、中 (md) 和大 (lg).此外，Less 代码已根据这些网格进行了更改.所以使用@gravy 在他的回答中描述的 .make-{x}-column mixins:https://stackoverflow.com/a/18667955/1596547

After reading the new (unfinished) Bootstrap 3 docs I am wondering how to create semantic mobile grid.

In short. How to convert this:

<div class="row">
  <div class="col col-lg-6 col-sm-6">6</div>
  <div class="col col-lg-6 col-sm-6">6</div>
</div>

To this and preserve the small mobile grid:

<div class="wrapper">
  <div class="left">6</div>
  <div class="right">6</div>
</div>

Less

.wrapper {  .make-row(); }
.left    { .make-column(6); // this creates only large grid }
.right   { .make-column(6); }

解决方案

If i understand your question well i think you should use:

<div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>

Where col-span-6 is your class for the large grid and col-small-span-6 for the small grid. If you leave col-small-span-6 your div will stack. The small grid don't use the col-span-* classes.

See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are ".col-", ".col-sm-" and ".col-lg-". The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.

So your html should be:

<div class="row">
  <div class="col-6 col-lg-6 col-sm-6">6</div>
  <div class="col-6 col-lg-6 col-sm-6">6</div>
</div>

LESS The latest version: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip doesn't contain a .make-small-column function any more. See also: https://github.com/twbs/bootstrap/pull/8302 .make-column() will add a media query for min-width: @grid-float-breakpoint so on the small grid your columns will stack always using this function.

You could try:

// Generate the small columns
.make-small-column(@columns) {
  position: relative;
  float: left;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  @max : (@grid-float-breakpoint - 1 );
  // Calculate width based on number of columns available
  @media (max-width: @max) {
    width: percentage((@columns / @grid-columns));
  }
}

.wrapper {  .make-row(); }
.left    { .make-column(6); .make-small-column(6);}
.right   { .make-column(6); .make-small-column(6);}

UPDATE

The answer above will be based on the release candidates of Twitter's Bootstrap 3. The final version of Twitter's Bootstrap 3 has 4 grid extra small (xs), small (sm), medium (md) and large (lg). Also the Less code has been change according these grids. So use the .make-{x}-column mixins as described by @gravy in his answer: https://stackoverflow.com/a/18667955/1596547

这篇关于Twitter 的 Bootstrap 3.x 语义移动网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！