在阅读了新的（未完成的）Bootstrap 3 文档后，我想知道如何创建语义移动网格。
简而言之。如何转换这个：
<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); }
第 1 部分：咆哮
我讨厌使用 html div 类作为其 HTML 的表示层的引导程序！！！我为您希望正确编程您的网站而鼓掌。
它让我想起了 90 年代和 2000 年代初期，当时我们都在用表格构建网站……我们是在倒退吗？
<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)etc... 根据 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);
}
索引.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>
如果我很好地理解了您的问题，我认为您应该使用：
<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-*类。
从现在开始，Twitter 的 Bootstrap 定义了三个网格：用于手机的小网格 (<480px)、用于平板电脑的小网格 (<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 的 Bootstrap 3 的候选发布版本。Twitter 的 Bootstrap 3 的最终版本有 4 个网格超小 (xs)、小 (sm)、中 (md) 和大 (lg)。此外，Less 代码已根据这些网格进行更改。所以使用@gravy在他的回答中描述的 .make-{x}-column mixins：https ://stackoverflow.com/a/18667955/1596547