html - bootstrap 更少的mixin .makeColumn小于跨度吗？

我使用的引导程序较少，我目前正在尝试使网络语义化。
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页面…我的文章占用的空间小于aspan12
我也可以把a.makeColumn(10)和.makeColumn(4)放在同一条线上。
就像是一个14格的列，而不是12格的列。
我遗漏了什么吗？

最佳答案

如果你需要的列数是n，.makeColumn混血和.span (#grid > .core > .span)混血都计算宽度如下：

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

这是将元素设置为网格上n列宽度所需的宽度。
如果n = 6，它将计算从网格左边缘到第6列右边缘的所有列宽和檐沟宽度。6根柱子和5个排水沟。
.span只做width，.makeColumn还添加了一个float: left，并且有一个可选的@offset参数，这个参数对您当前的问题并不重要，但是它允许您通过添加一个margin: left将列添加到元素的左侧。
正如上面所说的，在容器中包装现有元素应该解决问题。
我同意@kleinfreund使用html元素，您可以：

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

我希望这会有帮助。