如何为Bootstrap制作响应式(行流体)混合器 [英] How to make a Responsive (Row Fluid) Mixin for 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);}

及其一些相关的变体 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
    }
}

I can replace this code with

 <div class="row">
      <div class="span10">...</div>
      <div class="span2">...</div>
    </div>

With this, to make it more semantic

<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- Less stylesheet -->
.article {
  .makeRow(); 
  .main-section {
    .makeColumn(10);
  }
  .aside {
    .makeColumn(2);
  }
}

How can I do this with the fluid grid though:

 <div class="row-fluid">
      <div class="span10">...</div>
      <div class="span2">...</div>
    </div>

<!-- Less stylesheet -->
.article {
  ???
  .main-section {
    .makeColumn(10);
  }
  .aside {
    .makeColumn(2);
  }
}

I have tried:

.article { #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);}

and some variations on it from some related stackoverflow posts but its not getting responsive.

解决方案

This worked for me.. posting in case it helps anyone else.

Mixins for semantic fluid grid:

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

Use them just like the non-fluid mixins:

.article {
    .makeFluidRow();
    .main-section {
        .makeFluidCol(10); //Spans 10 cols
    }
    .aside {
        .makeFluidCol(1,1); //offset by one, spans 1
    }
}

这篇关于如何为Bootstrap制作响应式(行流体)混合器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！