Question

使用下面的代码，我正在尝试使用“btn-warning style”设置我的引导选择选择器，如下所示：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>

如您所见，选择选择器没有采用样式或宽度属性。我究竟做错了什么？非常感谢！

Answer 1

为您修复了网址。

注意我已经在结束标记</body>之前移动了javascript文件，以加快页面加载速度，并将css文件保存在<head>。

问题是你使用了不正确的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>

编辑：另外，为什么要链接两个引导程序版本？ 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>

Bootstrap选择选择器样式不起作用

1 个答案: