Twitter的Bootstrap 3.x语义移动网格

问题描述

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

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

简而言之.如何转换:

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

较少

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

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

从现在开始，Twitter的Bootstrap定义了三个网格:用于电话的微小网格( 768px).这些网格的行类前缀为".col-"，.col-sm-"和".col-lg-".中型网格将堆叠在768像素以下的屏幕宽度上.低于480像素的小网格也不会堆叠.

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.

因此您的html应该是:

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>

少另请参见: https://github.com/twbs/bootstrap/pull/8302 .make-column()将添加最小宽度的媒体查询:@ grid-float-breakpoint，因此在小网格上，您的列将始终使用此功能进行堆叠.

LESS 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.

您可以尝试:

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

更新

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

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语义移动网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！