html - bootstrap less mixin .makeColumn 是否小于 span？

Question

我正在使用 less 的 bootstrap，我目前正在尝试使 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) 和 .makeColumn(4) 并且它们会保持在同一行。 它就像是 14 格列而不是 12 格列。

我错过了什么吗？

Answer 1

没有。如果您需要的列数是 n，则 .makeColumn mixin 和 .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 中应该可以解决您的问题。 我同意@kleinfreund 关于尽可能使用 html 元素的观点:

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

希望对您有所帮助。