css – 仅用于mixins /占位符的Bootstrap – 具有语义类

2019年8月4日 113次阅读

我正在考虑在我的
HTML中只使用语义类,同时仍然在语义类中使用Bootstrap的类样式.

例如：

混入：

.newsItem {
    @include span4;
}

或占位符/扩展：

.newsItem {
    extend span4;
}

有可能吗？你有没有看到为什么不推荐的原因？谢谢.

最佳答案 @include span4;和@extend .span4;不会起作用,因为：

>在第一个中,没有任何mixins在bootstrap中调用.
>在第二个中,没有任何名为span4的选择器,使用grid-core-span-x等mixins生成选择器.

为此目的构建了mixins：makeRow()和makeColumn().

在你的情况下,如果你想在.newsItem div中使用span4,你必须把它放在你的SASS中：

.newsItem {
  @include makeColumn(4);
}

这些mixin的代码很简单.

@mixin makeRow() {
  margin-left: $gridGutterWidth * -1;
  @include clearfix();
}

@mixin makeColumn($columns: 1, $offset: 0) {
  float: left;
  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}

这种混合物有缺点.我不使用它们,因为响应式网格不会在你的语义类中使用.为什么？因为如果查看提供响应的引导程序的文件(例如,_responsive-767px-max.scss),只有spanX类转换为100％宽度.代码：

@media (max-width: 767px) { 
     /* ... */

     [class*="span"],
     .uneditable-input[class*="span"], 
     .row-fluid [class*="span"] {
         float: none;
         display: block;
         width: 100%;
         margin-left: 0;
         @include box-sizing(border-box);

      /* ... */
}
点赞