Question

我正在使用Bootstrap设置我的网站布局，并有类似的内容：

  <div class="row-fluid">
    <div class="span3">    
    </div>
    <div class="span9">
    </div>
  </div>

工作正常。但是，我有点担心这是在标记中定义表示并使更容易进行未来更改的事实，我想添加另一层间接。我想添加我自己的定义语义的类，然后包含定义布局表示的Bootstrap类。例如：

  <div class="main-block">
    <div class="side-bar">    
    </div>
    <div class="content-area">
    </div>
  </div>

和我相应的少文件......

@import "twitter/bootstrap";
.main-block { .row-fluid }
.side-bar { .span3 }
.content-area { .span9 }

较少的文档声明您可以“通过简单地将类名称作为其属性之一”将类的所有属性嵌入到另一个类中，因此它看起来应该可以工作，但是我收到错误：

.row-fluid未定义

我有什么遗失的东西吗？或者有更好的方法来解决这个问题吗？这是在使用less-rails-bootstrap gem的rails 3.2项目中，如果这有任何区别的话。

Answer 1

这有点复杂。你所指的基本上就是“mixins”的全部内容。首先，让我们解决错误。从小点我看到我的赌注是你正在尝试编译一个“自定义”.less文件，并且你没有@import在页面顶部的variables.less和mixins.less文件。那是对的吗？如果是这样，看看是否得到了按预期编译的代码。

但是，一旦获得编译代码，您就会发现自己遇到了新问题。在这种特殊情况下，通过尝试使用.span以外的名称，您将丢失网格mixin中属性选择器应用的任何样式，即[class*="span"]。编译，它看起来像这样：

[class*="span"] { float: left; margin-left: 20px; }
.row-fluid [class*="span"] {}
.row-fluid [class*="span"]:first-child { margin-left: 0; }

因此，在这种情况下，属性选择器将其样式应用于以“span”开头的任何类。

以下是一些可能对您有所帮助的选项：

1）在自定义类名之前添加“span”一词

<div class="row main-block">
  <div class="span-side-bar">
  </div>
  <div class="span-content-area">
  </div>
</div>

2）使用多个类将工作，但只有在你不对自定义类应用任何样式时才会使本机网格类中的任何样式无效：

<div class="row main-block">
  <div class="span3 side-bar">
  </div>
  <div class="span9 content-area">
  </div>
</div>

3）我的建议是使用维护默认Bootstrap网格系统所需的一点额外标记。重命名现在听起来很棒，但是如果你有任何想要在未来的更新中合并的话，那我独自留下的那个就是网格。

  <div class="row">
    <div class="span3">
      <div class="side-bar">
      </div>      
    </div>
    <div class="span9">
      <div class="content-area">
      </div>      
    </div>
  </div>

将Bootstrap类属性嵌入到另一个类中

1 个答案: