Question

前一天我决定玩Twitter Bootstrap。发现它非常精心制作，但我不是所有那些污染我的HTML的类的粉丝。

因此我尝试使用Less来使其更具语义性。我做得很好，直到我走过 .container 类。 “mixins.less”文件（第580行）中有一个mixin，用于设置容器宽度。但是如果不直接在html上包含类，我就无法工作。将它放入我的自定义文件时总是会出现编译错误。我尝试复制并插入我的文件，但没有成功......任何人都经历过这个？

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

Answer 1

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

大多数人都这样使用：

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

Answer 2

上面的答案的问题是makeRow（）和makeColumn（）mixins没有响应。我期待着编写语义类名，但是在编写例如行和 span6 offset1 类名时，我没有看到结果。

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

Twitter Bootstrap“.container”类：如何在语义上使用它？

2 个答案: