twitter-bootstrap Bootstrap 选择选择器样式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33622549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap select picker style not working
提问by Philip McQuitty
With my code below, I am trying to style my bootstrapped select picker with the "btn-warning style" as seen here: https://silviomoreto.github.io/bootstrap-select/
使用下面的代码，我尝试使用“btn-warning 样式”设置引导式选择器的样式，如下所示：https: //silviomoreto.github.io/bootstrap-select/
Here what my code looks like:
这是我的代码的样子：
<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>As you can see, the select picker is not taking on the style or width attributes. What am I doing wrong? Thanks so much!
如您所见，选择选择器没有采用样式或宽度属性。我究竟做错了什么？非常感谢！
回答by Frondor
Fixed the URLs for you.
为您修复了 URL。
Notice I've moved the javascript files just before the closing tag </body>for faster page loading, and keep the css files at the <head>.
请注意，</body>为了加快页面加载速度，我已将 javascript 文件移动到结束标记之前，并将 css 文件保留在<head>.
The problem was that you were using the incorrect url for bootstrap-select libraries. You can easily address those errors by using browser's developer tools, and then... well.. do some magic. :D
问题是您对引导选择库使用了错误的 url。您可以使用浏览器的开发人员工具轻松解决这些错误，然后……好吧……做一些魔术。: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>EDIT: Also, why are you linking two bootstrap versions? 3.3.5css and 2.3.1js/css? You should use the latest only... try it
编辑：另外，你为什么要链接两个引导程序版本？3.3.5css 和2.3.1js/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>