读完新的（未完成的）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); }
【问题讨论】：
标签： twitter-bootstrap less twitter-bootstrap-3
第 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>
我正在等待 Google 对非语义标记实施处罚的那一天。
第 2 部分：解决方案
不管怎样，把这个拉回到问题上来……
据我所知，对于引导程序 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>
【讨论】：
.container 和.make-row 放在同一个元素上，因为它们有不同的边距（容器的自动边距，行的排水沟大小的一半的负边距）。因此，您的行应该放在任何容器内。
如果我理解你的问题，我认为你应该使用：
<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 定义了三个网格：用于手机的小网格 (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>
少
最新版本：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
【讨论】：