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

2019年8月3日 220次阅读

我正在使用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 is undefined

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

最佳答案 这有点复杂.你所指的基本上就是“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>
点赞