Bootstrap select 下拉菜单在控件上方显示 selected 选项

Question

不确定 selected 选项为何显示在自定义下拉列表上方。这是 html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="user-scalable=no">

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/jasny-bootstrap.min.css" />   
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script type="text/javascript" src="bootstrap/js/less.js"></script>
</head>

<body>
<div class="row">
    <div class="col-xs-9">
        <select>
            <!-- <option selected disabled>Select Name:</option> -->
            <option>Vogel</option>
            <option>Other Name</option>
        </select>
    </div>
    <div class="col-xs-3">
         <button id="btn_id" class="button-info">Button</button>
    </div>
</div>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.tinycolorpicker.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/jasny-bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/offcanvas.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile.custom.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

也尝试定义一个 selected 选项（显示为注释掉）。我在 CSS 中输入的内容无关紧要，至少我尝试过的所有内容都是如此，但这是当前运行以及任何 Bootstrap 3.3.7 mods select.

select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}

实际上还没有看到与这个确切问题相关的任何其他问题，所以我一直在尝试破解它。跨浏览器显示相同的 "bug"。我现在正在使用自定义字体，但我尝试将字体系列更改放入上面的 CSS 中，但没有成功。

关于如何让下拉菜单上方的选项消失有什么想法吗？

更新：
这是 Firefox 上的检查栏：

<div class="col-xs-9">
  <div class="ui-select">
    <div id="select-27-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
        <span>Vogel</span>
        <select size="1">
            <option>Vogel</option>
            <option>Other name</option>
        </select>
    </div>
  </div>
</div>

我还在文档末尾添加了 js 脚本，包括不处理任何相关内容的自定义 main.js 文件。

Answer 1

select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 
<body>
<div class="row">
    <div class="col-xs-9">
        <select>
            <!-- <option selected disabled>Select Name:</option> -->
            <option>Vogel</option>
            <option>Other Name</option>
        </select>
    </div>
    <div class="col-xs-3">
         <button id="btn_id" class="button-info">Button</button>
    </div>
</div>
</body>

此代码完全没有问题，我们需要查看您页面上的其余代码以了解您的问题

更新：我无法在线访问的唯一文件

<link rel="stylesheet/less" type="text/css" href="style.less" />

没有它，代码运行良好，我认为有一种错误或风格会影响你的 select

Answer 2

其中一个 javascript 补充说 <span>...
试着猜猜谁在做这个肮脏的把戏：用 css

隐藏它

.ui-select span { 
  display: none; 
}

Bootstrap select 下拉菜单在控件上方显示 selected 选项

Bootstrap select dropdown showing selected option above the control

html

css

jquery

jquery-mobile

twitter-bootstrap-3