Question

我使用bootstrap v.3并且我想创建一个不同的按钮，因此我复制btn-primary的所有css类，重命名为myBigButton并应用我的更改。 Here完美无缺。但是在我的页面中，新类'myBigButton'不存在（当我从broswer检查元素时...）我的页面中有相同的代码

<div class="container">
    <div class="row ">
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
        </div>
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
        </div>
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block">cccccc</button>
        </div>
    </div>
</div>

任何想法为什么？

最奇怪的是，如果双写css类

.myBigBtn {
    color: #ffffff;
    background-color: #5A6E9E;
    border-color:#5A6E9E;
    line-height: 100px;
    font-size: 23px;
}

.myBigBtn {
    color: #ffffff;
    background-color: #5A6E9E;
    border-color:#5A6E9E;
    line-height: 100px;
    font-size: 23px;
}

工程..

更新

我将所有css文件here添加到不起作用的地方..

Answer 1

一切正常！

在引导CSS后的<head> 中包含您的CSS文件：

... <head> Bootstrap CSS Custom CSS </head> ...

HTML 应如下所示：

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BOOTSTRAP TEMPLATE</title>  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">  <link rel="stylesheet" href="css/custom.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    </head> <body id="body"> <div class="container"> <div class="row "> <div class="col-md-4"> <button type="button" class="btn myBigBtn btn-block ">aaaaaa</button> </div> <div class="col-md-4"> <button type="button" class="btn myBigBtn btn-block">bbbbbb</button> </div> <div class="col-md-4"> <button type="button" class="btn myBigBtn btn-block">cccccc</button> </div> </div> </div> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html>

自定义CSS：

<link rel="stylesheet" href="css/custom.css">

良好做法链接到外部CSS文件。

Answer 2

你的问题是评论：

//here is my class

css中的评论是这样完成的

/* here is my class */

将注释更改为此，它应该可以正常工作

Answer 3

.myBigBtn和.btn具有相同的prionerity，因此应用样式以便将css文件包含在页面中。所以.btn会覆盖你的风格。这是最可能的原因。

CSS规则不会影响HTML

3 个答案: