Twitter的引导3.x语义移动网格

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

总之。如何将此转换：

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

来源

2013-06-25 howtodothis

如果我明白你的问题很好，我认为你应该使用：

~~<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不包含。使小柱的功能了。~~ 另请参阅：https://github.com/twbs/bootstrap/pull/8302 .make-column（）将为最小宽度添加媒体查询：@ 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);}

UPDATE

答案以上将基于Twitter的引导3. Twitter的引导3的最终版本的候选发布版有4个网格超小型（ xs），小（sm），中（md）和大（lg）。此外，Less代码已根据这些网格进行更改。因此，使用由@gravy在他的回答中描述的.make- {X} -column混入：https://stackoverflow.com/a/18667955/1596547

来源

2013-06-25 21:45:11

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

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

我在等待，谷歌强加给非语义标记处罚的一天。

第2部分：解决方案

总之，拉这回问题...

对于引导3，据我所知，您不能使用.make-column(6)等..按贝斯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>

来源

2013-09-06 23:17:51 Gravy

这个答案使用由引导，这是很好提供的混入。虽然因为它们具有不同的边距（容器的自动边距，以及行的一半的边距大小的负边距），我会谨慎的将'.container'和'.make-row'放在同一个元素上。因此，您的行应放置在任何容器内。 – rmarscher

Twitter的引导3.x语义移动网格

回答

相关问题