bootstrap less mixin .makeColumn 是否小于跨度？

Question

我正在使用更少的引导程序，我目前正在尝试制作网络语义。

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 only 有宽度，.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>

希望对你有帮助。