问题
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: 自定义宽度
转载请注明原文地址: https://ju.6miu.com/read-666942.html
