3

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

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)它会保持在同一条线上。这就像它是一个 14 格列而不是 12 格列。

我错过了什么吗？

4

1 回答 1

3

不。如果您需要的列数是n，.makeColumnmixin 和.span (#grid > .core > .span)mixin 都计算宽度如下：

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

这是您将元素设置为网格上 n 列的宽度所需的宽度。

如果n = 6，它会计算从网格左边缘到第 6 列右侧边缘的所有列宽和装订线宽度。6 列和 5 个装订线。

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

我希望这会有所帮助。

于 2013-04-26T15:26:32.447 回答