how*_*his 9 less twitter-bootstrap twitter-bootstrap-3
阅读新的(未完成)后引导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); }
Gra*_*avy 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>
VS
<table><tr><td>6</td><td>6</td></tr></table>
我正在等待谷歌对非语义标记进行处罚的那一天.
第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>
如果我很好地理解你的问题，我认为你应该使用：
\n\n
\n <div class="row">\n <div class="col-span-6 col-small-span-6\xe2\x80\xb3>6</div>\n <div class="col-span-6 col-small-span-6\xe2\x80\xb3>6</div>\n </div>\n
大网格和小网格的 col-span-6班级在哪里？col-small-span-6如果你离开col-small-span-6你的 div 将会堆叠。小网格不使用这些col-span-*类。
从现在开始，Twitter\xe2\x80\x99s Bootstrap 定义了三个网格：用于手机的微型网格 (<480px)、用于平板电脑的小型网格 (<768px) 和用于 Destkops 的中大型网格 (>768px)。这些网格的行类前缀为 \xe2\x80\x9c.col-\xe2\x80\x9d、\xe2\x80\x9c.col-sm-\xe2\x80\x9d 和 \xe2\x80\x9c.col -lg-\xe2\x80\x9d。中大型网格将堆叠在 768 像素屏幕宽度以下。低于 480 像素的小网格也是如此，并且小网格从不堆叠。
\n\n所以你的 html 应该是：
\n\n<div class="row">\n <div class="col-6 col-lg-6 col-sm-6">6</div>\n <div class="col-6 col-lg-6 col-sm-6">6</div>\n</div>\nLESS \n最新版本：https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip不再包含 .make-small-column 函数。另请参阅： https: //github.com/twbs/bootstrap/pull/8302 .make-column() 将为最小宽度添加媒体查询：@grid-float-breakpoint，因此在小网格上，您的列将始终堆叠使用此功能。
你可以尝试：
\n\n// Generate the small columns\n.make-small-column(@columns) {\n position: relative;\n float: left;\n // Prevent columns from collapsing when empty\n min-height: 1px;\n // Inner gutter via padding\n padding-left: (@grid-gutter-width / 2);\n padding-right: (@grid-gutter-width / 2);\n @max : (@grid-float-breakpoint - 1 );\n // Calculate width based on number of columns available\n @media (max-width: @max) {\n width: percentage((@columns / @grid-columns));\n }\n}\n\n.wrapper { .make-row(); }\n.left { .make-column(6); .make-small-column(6);}\n.right { .make-column(6); .make-small-column(6);}\n更新
\n\n上面的答案将基于 Twitter 的 Bootstrap 3 的候选版本。Twitter 的 Bootstrap 3 的最终版本有 4 个网格：特小 (xs)、小 (sm)、中 (md) 和大 (lg) ）。此外，Less 代码也根据这些网格进行了更改。因此，请使用 .make-{x}-column mixin，如 @gravy 在他的回答中所述：/sf/answers/1306756881/
\n