我可以用替换此代码
<div class="row">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
有了这个,使其更具语义
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.makeRow();
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
我如何使用流体网格做到这一点:
<div class="row-fluid">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
<!-- Less stylesheet -->
.article {
???
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
我试过:
.article { #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);}
以及一些相关的stackoverflow帖子的一些变体,但它没有得到响应。
这对我很有用…发布以防对其他人有帮助。
语义流体网格的混合:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(@span:1,@offset:0){
float: left;
#grid > .fluid .span(@span);
#grid > .fluid .offset(@offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(@offset);
}
}
像使用非流体混合物一样使用它们:
.article {
.makeFluidRow();
.main-section {
.makeFluidCol(10); //Spans 10 cols
}
.aside {
.makeFluidCol(1,1); //offset by one, spans 1
}
}
好的,我想我已经明白了。我正在更新这个问题,用流体布局添加偏移,因为这是我遇到最大麻烦的地方。
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.main-section {
#grid > .fluid > .offset(2);
#grid > .fluid > .span(8);
}
.aside {
#grid > .fluid > .span(2);
}
}
我发现您的问题是在寻找一种将.makeColumn()用于响应网格(1200px、768px等)的方法。Bootstrap 2中包含的.makeColumn()mixin只占940像素的网格。
为了解决这个问题,我只是在一个LESS文件中扩展了.makeColumn()mixin,该文件在Boostrap文件之后加载。
// Improve .makeColumn to work with 1200px responsive grid
.makeColumn(@columns: 1, @offset: 0) {
@media (min-width: 1200px) {
margin-left: (@gridColumnWidth1200 * @offset) + (@gridGutterWidth1200 * (@offset - 1)) + (@gridGutterWidth1200 * 2);
width: (@gridColumnWidth1200 * @columns) + (@gridGutterWidth1200 * (@columns - 1));
}
}