Twitter Bootstrap ".container"类：如何语义化地使用它？

Question

一天前，我决定尝试使用Twitter Bootstrap。我发现它非常精美，但我不喜欢所有那些污染我的html的类。

因此，我尝试使用Less使其更加语义化。我一直做得很好，直到我遇到了.container类。在"mixins.less"文件（第580行）中有一个mixin设置容器的宽度。但是，如果不将其直接包含在html中，我就无法使其工作。每次将其放入我的自定义文件中时，我都会遇到编译错误。我尝试将其复制并插入到我的文件中，但没有成功...有人遇到过这种情况吗？

当然，我可以手动强制设置宽度，但我认为这不是最好的方法。有什么想法吗？

- darksoulsong

Answer 1

这篇文章是我找到的迄今为止最好的资料。参考作者的例子，大多数人使用以下方式：

<div class="row">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div>

如果您和我一样，那么您正在尝试达到以下目标：

<!- 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
  }
}

- Noah Goodrich

---

哇，非常好！但只有一件事...它不应该是“span6”和“span6”，而是“span10”和“span2”吗？ - schmunk

Answer 2

上面的答案有问题，makeRow()和makeColumn() mixins不是响应式的。我本来想写语义化的类名，但是当我写例如row和span6 offset1类名时，没有看到结果。

你可以查看https://github.com/twitter/bootstrap/issues/2242获取更多信息。

- hisa_py