bootstrap-multiselect样式修改
问题
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
版权声明:本文为博主原创文章,转载请附上博文链接!
转载于:https://www.cnblogs.com/telwanggs/p/9871514.html
bootstrap-multiselect样式修改相关推荐
- django-pagination 样式修改
默认 django-pagination 样式: 使用bootstrap后样式: (有些瑕疵,下面来完善一下) 修改后: 效果还不错吧.那么讲下如何修改. 首先找到其源码: (路径:site-pac ...
- Bootstrap 定制和修改方法-perfect
特别声明:此篇文章由Sunnylost根据Thomas Park的英文文章原名<Customizing Bootstrap>进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之 ...
- Bootstrap使用样式引用步骤,以防掉坑
Bootstrap使用样式引用步骤 今天我引用Bootstrap框架一直出不来,并不是上面写好的效果,濒临崩溃.不过好在我终于发现了问题所在,分享给大家以防止掉坑 bootstrap使用四步曲: 1. ...
- html input type=quot;filequot;,科技常识:关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...
- Word中新建样式/修改样式对话框中的各个选项意义
名称(N): 显示您在"样式"对话框中选择的样式的名称.您可以更改此样式,或者键入新名称来新建样式,长文档中,样式的名称要注意易于理解和记忆,如"篇样式",&q ...
- 滚动条全局样式修改与局部修改
全局的样式代码: ::-webkit-scrollbar {width: 10px;height: 10px;}/* 滚动条的滑块 */::-webkit-scrollbar-thumb {backg ...
- 全局样式_CAD新手福利:不懂标注样式修改的请进来一看
在CAD中,尺寸标注是必不可少的. 因此关于尺寸标注的样式修改,也相对来说比较"杂",因为有些时候,尺寸线和尺寸界限都会有一定的要求. 今天,分享一些尺寸标注中关于尺寸线和尺寸界限 ...
- html input选择框样式修改,关于type=file的input框样式修改小结
关于type="file"的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了. 上传按钮 ...
- rows是横着的还是cols_在Flask中如何自定义TextAreaField的rows和cols且将表单渲染为bootstrap的样式?...
flask-bootstrap提供了quick_form()这个方法用来快速渲染表单的样式.但是它无法指定rows和cols. forms.py class PostArticle(Form): ti ...
- layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
最新文章
- php ajax session失效,PHP中解决ajax请求session过期退出登录问题
- 李飞飞点赞「ARM」:一种让模型快速适应数据变化的元学习方法 | 开源
- WAMP安装提示缺少 msvcr100.dll文件解决方法
- 梅捷SY-A780G+冷启动黑屏,需Reset才能进入系统
- AGC038D - Unique Path(建图)
- LwIP应用开发笔记之七:LwIP无操作系统HTTP服务器
- 【高清截图】UbuntuKylin 14.04 桌面版安装步骤
- c#devexpres窗体划分 以及panelcontrol 相关操作
- # ; @REM !等符号在WINCE6.0下的意义和作用
- 项目出现 The superclass “javax.servlet.http.HttpServlet“ was not found on the Java Build Path 解决方法
- jquery 如何插入元素
- nvme固态硬盘开机慢_固态硬盘速度慢?三步教你开启SSD全速模式!
- AI、大数据、云计算深度融合,星环大数据3.0给用户带来哪些体验?
- Flash 第十一章 引导层和遮罩层动画
- 《大学生Python学习》社区正式运行,加入我们,每日学习,引燃青春~
- Bootstrap自定义图标
- windows 下配置 Nginx 常见问题
- VM虚拟机安装WindowsXp_SP3全过程
- Android常用的第三方开源库和框架
- 【生信】基因组学中的统计学应用
热门文章
- 用react和electron实现文件树组件(上)
- 横河川仪压力变送器调零_YOKOGAWA/横河EJX110A差压变送器的性能误差和精度介绍...
- python重命名文件夹下所有文件_Python3.4.3重命名当前文件夹下的文件
- python爬取小说写入txt_Python BeautifulSoup 爬取笔趣阁所有的小说
- 数据结构-二叉树、搜索树、平衡二叉树详解及C语言实现
- 【Python】eval+random库+字符串转列表+列表转字符串
- 数字图像处理(五)——形态学
- Pentium的指令系统(1)——Pentium的寻址方式
- linux多线程学习(二)——线程的创建和退出
- I2C总线信号时序总结