Bootstrap使用注意事项

最新推荐文章于 2021-09-10 17:05:41 发布

寻-度--

最新推荐文章于 2021-09-10 17:05:41 发布

阅读量675

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： BootstrapV3.3.7 JavaScript JQueryV2.0

本文链接：https://blog.youkuaiyun.com/Yinyangyuan/article/details/83548085

前端开发专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了从Bootstrap V2.x升级到V3.x时，下拉子菜单功能的变化，包括如何自定义CSS来实现类似功能，以及在使用Bootstrap进行多级手风琴嵌套时遇到的常见错误及其解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、V2.x和V3.x在下拉子菜单中的区别

在BootstrapV2.x中的class="dropdown-submenu" 是可以直接使用的，但是在bootstrapV3.x的版本中，却去掉了这一个样式，需要用到下拉子菜单功能的话，需要自己去添加相应的样式：

//添加对drop_submenu的支持
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

参考链接：https://stackoverflow.com/questions/18023493/bootstrap-dropdown-sub-menu-missing#

2、使用boostrap的多级手风琴嵌套报错：

由于对JavaScript不太熟悉，跟官方的demo对比了好久，也没有发现问题，后来同学帮忙看过说可能是url的路径找不到的问题，才突然想到了一种可能，也就是在URL中，jQuery无法解析“/”可能，将 / 去掉就可以了。即使找不到，相关的id所代表的元素，也不会再报错。所以，建议自己以后最好使用比较成熟的版本，统一确定版本，避免出现一些问题，耗费大量时间！！！

<div class="panel panel-default">
		<div class="panel-heading">
			<a class="panel-title" data-toggle="collapse" data-parent="#funmenu" href="#dispatchActionlogin">添加</a>
		</div>
</div>