问题

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
版权声明：本文为博主原创文章，转载请附上博文链接！

bootstrap-multiselect样式修改的更多相关文章

  1. bootstrap switch样式修改与多列等间距布局

    先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...

  2. web 前端常用组件【03】Bootstrap Multiselect

    实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...

  3. django-pagination 样式修改

    默认 django-pagination  样式: 使用bootstrap后样式: (有些瑕疵,下面来完善一下) 修改后: 效果还不错吧.那么讲下如何修改. 首先找到其源码: (路径:site-pac ...

  4. yii使用bootstrap分页样式

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  5. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. ExtJS控件样式修改及美化

    Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...

  7. bootstrap 分页样式代码

    bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  8. 帝国cms 列表页分页样式修改美化【2】

    上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...

  9. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  10. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

随机推荐

  1. 总结 vb与数据库的连接方法

    总结 vb与数据库的连接方法 分类:vb数据库 (4672)  (38)  举报  收藏 总结:vb与数据库连接方式,两种分法. 根据是否使用ODBC(驱动程序)来分: 1.有源连接 2.无源连接. ...

  2. WCF中的异常

       一.考虑到安全因素,为了避免将服务端的异常发送给客户端.默认情况下,服务端出现异常会对异常屏蔽处理后,再发送到客户端.所以客户端捕捉到的异常都是同一个FaultException异常. 例如在服 ...

  3. IOS中微信摇一摇声音无法播放解决办法

    在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗,用户 ...

  4. 【模板】埃拉托色尼筛法 && 欧拉筛法 && 积性函数

    埃拉托色尼筛法 朴素算法 1 vis[1]=1; 2 for (int i=2;i<=n;i++) 3 if (!vis[i]) 4 { 5 pri[++tot]=i; 6 for (int j ...

  5. httpServletRequest中的流只能读取一次的原因

    首先,我们复习一下InputStream read方法的基础知识, java InputStream read方法内部有一个,postion,标志当前流读取到的位置,每读取一次,位置就会移动一次,如果 ...

  6. IDEA 项目相关基础设置

    导入或者新建项目, 选择文件或者目录, 这里提示了可以选择哪种类型的     相关Tomcat 的配置 下载地址: http://tomcat.apache.org/download-70.cgi#7 ...

  7. hdu 1226

    超级密码 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  8. ZooKeeper 节点

    ZNode zk 中的每一个数据节点称为 ZNode ,所有的 ZNode 按层次化结构进行组织,形成一棵树(与Linux文件系统相似).节点可以写入数据,也可以在节点下面创建子节点. 节点类型: 1 ...

  9. java 获取两个日期之间的所有日期（年月日）

    前言:直接上代码 java 获取两个日期之间的所有日期(年月日) /** * 获取两个日期之间的日期,包括开始结束日期 * @param start 开始日期 * @param end 结束日期 * ...

  10. NodeJs -- express 快速建站

    直接上干货 1.新建一个目录来存放我们即将要做的东西: 2.win+R打开小黑框:进入到我们的目录下: 3.首先我们要全局安装Express框架:**在这一步之前要确保你本机上安装了node:** n ...