Question

在阅读新的（未完成的）Bootstrap 3 docs后，我想知道如何创建语义移动网格。

简而言之。如何转换：

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

为此并保留小型移动网格：

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

Answer 1

第1部分：咆哮

我讨厌使用html div类作为HTML表示层的bootstrappers！我赞赏你希望正确编程你的网站。

这让我想起了90年代和21世纪初我们都在用桌子建网站的时候......我们是向后退人吗？

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

VS

<table><tr><td>6</td><td>6</td></tr></table>

我正在等待Google对非语义标记进行处罚的那一天。

第2部分：解决方案

无论如何，把这个问题拉回来......

对于bootstrap 3，据我所知，你不能使用.make-column(6)等...按照Bass Jobsen的回答，因为你需要指定窗口/屏幕的大小。 lg / md / sm / xs

以下是我将如何做到这一点......

<强> main.less

@import 'bootstrap.less';

.wrapper {
    .container;
    .make-row();
    .clearfix();
}

.content-main { // Change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}
.content-sidebar { // change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}

<强>的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <style rel="stylesheet/less" src="less/main.less" />
    <script src="js/less-1.4.1.min.js" type="text/javascript"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>

    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->   
</head>
<body>
    <div class="wrapper">
        <div class="content-main">
            <div class="page-title">
                <!-- Page Title Stuff -->
            </div>
            <div class="page-content">
                <!-- Page Content Stuff -->
            </div>
        </div>
        <div class="content-sidebar"><!-- Page Footer Stuff --></div>
    </div>  
</body>

Answer 2

如果我理解你的问题，我认为你应该使用：

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

~~其中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的自举定义了三个网格：为电话微小网格（小于480像素），小格为片剂（小于768px）和中等大网格Destkops（大于768px）。这些网格的行类前缀是“.col-”，“。col-sm-”和“.col-lg-”。中大网格将堆叠在768像素以下的屏幕宽度。那么480像素以下的小网格也是如此，微小的网格永远不会叠加。

所以你的HTML应该是：

<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 ~~最新版本：https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip不再包含.make-small-column函数。~~另请参阅：https://github.com/twbs/bootstrap/pull/8302 .make-column（）将添加媒体查询对于min-width：@ grid-float-breakpoint所以在小网格上你的列将总是使用这个函数进行堆栈。

你可以尝试：

// 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的引导3. Twitter的引导3的最终版本的释放候选有4个网格的额外小（XS），小（SM），介质（MD）和大（LG）。根据这些网格，Less代码也发生了变化。因此，请使用@grake在他的回答中描述的.make- {x} -column mixins：https://stackoverflow.com/a/18667955/1596547

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

2 个答案: