3

このコードを次のように置き換えることができます

 <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の投稿からのいくつかのバリエーションがありますが、応答しません。

4

3 に答える 3

1

レスポンシブ グリッド (1200px、768px など) に .makeColumn() を使用する方法を探しているあなたの質問を見つけました。Bootstrap 2 に含まれている .makeColumn() mixin は、940px グリッドのみを考慮します。

これを修正するために、Boostrap ファイルの後にロードされる LESS ファイルで .makeColumn() mixin を拡張しました。

// 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));
  }
}
于 2013-09-06T17:32:45.653 に答える
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);
  }
}
于 2013-02-04T21:37:23.457 に答える