3

私はlessでブートストラップを使用しており、現在Webをセマンティックにしようとしています。

HTML 部分:

<!-- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

少ない部分:

/* its accompanying Less stylesheet */
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}

しかし、レンダリングされた html ページを見ると... 私の記事は、span12

.makeColumn(10)andを付けることもできます.makeColumn(4)が、同じ行にとどまります。12グリッド列ではなく、14グリッド列だったようです。

何か不足していますか？

4

1 に答える 1

3

いいえ。必要な列数が の場合n、.makeColumnmixin と.span (#grid > .core > .span)mixin は両方とも次のように幅を計算します。

(@gridColumnWidth * n) + (@gridGutterWidth * (n-1))

これは、要素をグリッド上で n 列の幅に設定するために必要な幅です。

の場合n = 6、グリッドの左端から列 6 の右端までのすべての列幅とガター幅を計算します。6 列と 5 ガター。

.span widthのみ.makeColumnを行い、も追加しfloat: left、現在の問題には重要ではないオプションの @offset 引数がありますが、 . を追加することで要素の左側に列を追加できますmargin: left。

@sody が上で述べたように、既存の要素を .container でラップすると問題が解決するはずです。そして、次のことができる html 要素を使用することについて @kleinfreund に同意します。

<div class="container">
    <article>
        <div class="main-section">Bootstrap rocks
            <aside>
                 By the way...
            </aside>
        </div>
    </article>
</div>

それが役立つことを願っています。

于 2013-04-26T15:26:32.447 に答える