如何使一个响应（排液）密新的引导(How to make a Responsive (Row Flu

我可以将这段代码

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

和一些关于它的一些变化相关的 计算器的职位 ，但它没有得到响应。

Answer 1:

这为我工作..发布的情况下，它可以帮助别人。

语义网格液混入：

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

Answer 2:

好吧，我想我已经得到了它。 我更新的问题与流体布局添加偏移，因为这是在那里我遇到了最麻烦的。

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

Answer 3:

我发现你的问题寻找一种方式来使用.makeColumn（）为响应网格（1200像素，768px等）。 即包括与引导2只占940px网格.makeColumn（）混入。

为了解决这个问题，我只是在延长的自举文件后，加载一个LESS文件.makeColumn（）混入。

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

文章来源: How to make a Responsive (Row Fluid) Mixin for Bootstrap