5

一天前，我决定玩转 Twitter Bootstrap。发现它制作精良，但我不喜欢所有那些污染我的 html 的类。

所以我正在尝试使用 Less 来使其更具语义化。在我跨入 .container类之前，我做得很好。“mixins.less”文件（第 580 行）中有一个 mixin，用于设置容器宽度。但是如果不直接在 html 中包含该类，我就无法使其工作。将其放入自定义文件时，我总是会遇到编译错误。我尝试将其复制并插入到我的文件中，但没有成功……有人经历过这个吗？

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

4

2 回答 2

6

这是迄今为止我发现的最好的治疗方法。借用作者的例子：

大多数人使用这个：

<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
  }
}
于 2012-06-28T06:43:39.977 回答
1

上面答案的问题是 makeRow() 和 makeColumn() 混合没有响应。我期待着写语义类名，但我没有看到写例如row和span6 offset1类名时的结果。

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

于 2012-11-02T04:18:15.383 回答