使用下面的代码，我尝试使用“btn-warning 样式”设置我的自举选择器的样式，如下所示:https://silviomoreto.github.io/bootstrap-select/
我的代码如下:
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="drake.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
</head>
<body>
<div id="course2">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</div>
</body>如您所见，选择器没有采用样式或宽度属性。我究竟做错了什么？非常感谢!
最佳答案
为您修复了 URL。
请注意，我已将 javascript 文件移动到结束标记 </body> 之前为了更快的页面加载，并将 css 文件保留在 <head> .
问题是您为 Bootstrap 选择库使用了不正确的 url。您可以使用浏览器的开发人员工具轻松解决这些错误，然后……好吧……do some magic . :D
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>编辑:另外，为什么要链接两个 Bootstrap 版本？ 3.3.5 CSS 和 2.3.1 js/css？你应该只使用最新的......试试吧
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>关于javascript - Bootstrap 选择器样式不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33622549/