css - 如何为Bootstrap制作响应式(行流体)混合器

我可以用以下代码代替

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

和某些related stackoverflow posts的一些变化，但没有响应。

最佳答案

这对我有用..发布以防万一。

用于语义流体网格的Mixins：

.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
    }
}

关于css - 如何为Bootstrap制作响应式(行流体)混合器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14695502/