Question

我正在尝试使用增强复选框的外观 this css

我的代码如下所示：

<div class="padding">
  <div class="checkbox checkbox-success">
    <input id="excludeUser" name="excludeUser" type="checkbox" checked>
    <label data-toggle="tooltip" title="exclude" for="excludeUser">Exclude this user </label>
  </div>
</div>

但它没有做任何事情。我甚至尝试abc-checkbox-success作为一个类，因为它在文件中命名，但没有帮助。

Here is fiddle with my try

Answer 1

班级名称为abc-checkbox和abc-checkbox-success，而不是checkbox。

另外，你的小提琴缺少字体真棒库：

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

.padding {
    padding: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.0/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
  <div class="abc-checkbox abc-checkbox-success">
    <input id="excludeUser" name="excludeUser" type="checkbox" checked>
    <label data-toggle="tooltip" title="exclude" for="excludeUser">Exclude this user </label>
  </div>
</div>

Bootstrap awesome复选框css不适用样式

1 个答案: