我已经在我的网络应用程序中使用bootstrap multiselect大约9个月了。我一直在设计下拉列表的宽度为100％，如下所示：
ul.multiselect-container {
width: 100% !important;
}
.dropdown-menu {width:100% !important;}
我刚刚获得了新版本，因为它有一个额外的配置选项（onDeselectAll）。现在下拉宽度不是100％。看看元素控制台中的样式，看起来我的css应该仍然可以工作：
我们可以在css的照片中看到.dropdown-menu {width:100% !important}被覆盖但我不确定是什么。
有任何想法吗？
以下最小的示例工作正常，因此Bootstrap Multiselect不会覆盖样式。但请注意，在你的情况下，.dropdown-menu和.multiselect-container指的是相同的元素（ul，如下例所示。因此，将样式应用于两个类，就像你所做的那样是没有必要的，可能会导致你在检查器中看到的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect').multiselect({
buttonWidth: '400px'
});
});
</script>
<style type="text/css">
.multiselect-container {
width: 100% !important;
}
</style>
</head>
<body>
<select id="multiselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</html>我使用buttonWidth参数，.multiselect给你类似David Stutz。但是，我把'100%'放在参数中。
<body>
<select id="multiselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect').multiselect({
buttonWidth: '100%'
});
//caret is in the middle, switch it to right
$(".caret").css('float', 'right');
$(".caret").css('margin', '8px 0');
});
</script>
</body>
我尝试设置buttonWidth和.multiselect-container，但它不适合我。
这是我在form-group类中将select标记设置为100％的方法，它可能对某人有所帮助。
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.css" />
<style>
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="tags">Select tags list</label>
<div class="form-group">
<select class="selectpicker input-large" multiple data-live-search="true">
<option>COAL_5CD-PT07</option>
<option>COAL_5CD-PT08</option>
<option>COAL_5CD-PT09</option>
<option>LNG_TI37130</option>
<option>LNG_TI37230</option>
<option>CCP_AB1HAD45CP900_ZQ01</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function () {
$('select').selectpicker();
});
</script>
</body>
</html>