Question

当我使用btn-info类时，按钮颜色不是蓝色，但是当我在jsfiddle中尝试时工作正常。

<!DOCTYPE html>
<html>
<head>
<title>my app</title>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">

</head>
<body>  

<!-- carousel code here -->

<a href="#" type="button" class="btn btn-info">Click here</a>

</body>
</html>

screenshot

Answer 1

你有没有尝试过：

"background-color:#000;"

例如在.btn-info？

上

Answer 2

我认为你的bootstrap文件存在一些问题，请尝试使用这些cdns。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在这里工作正常

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>my app</title>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">

</head>
<body>  

<!-- carousel code here -->

<a href="#" type="button" class="btn btn-info">Click here</a>

</body>
</html>

＆＃13;

Answer 3

我认为material-bootstrap和bootstrap样式表之间存在冲突。尝试评论一个ans离开另一个，它应该工作。如果您不想这样，请通过CSS编码手动尝试，尝试以下方法：

.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;}

Bootstrap按钮颜色不起作用，但在jsfiddle中工作

3 个答案: