Question

我刚刚写了一个bootstrap列页面，但我的一个类不起作用：

.serviceDetails {

  .height {
    line-height: 12px;
    margin-top: 8px;
  }

  p.text , span.text {
    font-size:11px;
  }

  .icon {
    border:11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

这是我的HTML：

    <section class="serviceDetails">
        <div class="row">
        <div class="col-md-3 col-xs-12">
                    <div class="col-md-2 hidden-xs icon">
                     <i class="fa fa-bandcamp" aria-hidden="true"></i>
        </div>
....

由于某种原因，.icon类不起作用？更多信息：codepen

Answer 1

将你的css带到巢外，可以满足你的需要，

 .icon {
    border: solid pink 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

http://codepen.io/anon/pen/dOYgaV

编辑：添加颜色并填充到边框，也更改了codepen上的预处理器设置。

.serviceDetails {

  .height {
    line-height: 12px;
    margin-top: 8px;
  }

  p.text , span.text {
    font-size:11px;
  }

 .icon {
    border: solid pink 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

预编译上面写的sass也可以解决问题，http://www.sassmeister.com/ - 在线编译器 http://sass-lang.com/ - sass文档

这是因为普通的css不允许你在类中包含类规则，因为sass支持嵌套以及许多其他很酷的功能。

我怎样才能使这个css规则有效？

1 个答案: