问题
bootstrap-multiselect是一款相当不错的bootstrap风格下拉框组件，但是它的某些样式我不是很喜欢，按钮文本和下拉符号 “” 都是居中的，且下拉列表的宽度也没有跟随变动。
<script type="text/javascript">
$(document).ready(function() { $('#example-dropRight').multiselect({ buttonWidth: '400px', dropRight: true }); });</script>需求我不太喜欢这个样式，现在我希望按钮的文本和下拉符号 “” 都右对齐，同时下拉列表的宽度与自适应为按钮的宽度。
编码
CSS
.multiselect-wrapper { display: inline-block; position: relative; vertical-align: middle; text-align: left;}.multiselect-wrapper button {
text-align: left; }.multiselect-wrapper span {
margin-left: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }.multiselect-wrapper .dropdown-menu {
width: 100%; }.multiselect-wrapper .caret {
position: absolute; top: 13px; right: 10px; width: 0; height: 0; }.multiselect-wrapper label.checkbox, .multiselect-wrapper label.radio {
padding: 3px 20px 3px 30px !important; width: 100%; }JS 利用buttonContainer属性，以自定义的multiselect-wrapper替换默认的 btn-group样式。$(function(){ $('.multiselect').multiselect({ buttonWidth: "100%", buttonContainer: "<div class='multiselect-wrapper' />" });});HTML<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"><!DOCTYPE html><html lang="zh-cn"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf8" /> </head> <body> <select name="department"> <option value="true">物流部</option> <option value="false">设计部</option> </select> <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <script src="https://cdn.bootcss.com/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> </body></html>示例 补充 bootstrap中对.dropdown-menu有个最小宽度的设定min-width: 160px，因此当buttonWidth低于160px时，下来列表的宽度并不会变化，如果有需求可以在.dropdown-menu中添加样式min-width: 自定义宽度--------------------- 作者：鱼吾 来源：CSDN 原文：https://blog.csdn.net/u012143455/article/details/70158557 版权声明：本文为博主原创文章，转载请附上博文链接！