<p class="pull-right visible-xs"></p>，，当分辨率小的时候，，，弹出按钮出来，，但是点击按钮的时候没有显示出列表框list出来，，，各位好友求解
逸风4241167
2016-12-10 16:26
<p class="pull-right visible-xs"></p>，，当分辨率小的时候，，，弹出按钮出来，，但是点击按钮的时候没有显示出列表框list出来，，，各位好友求解
2回答
-
- Joker_JOkes
- 2017-03-19 00:26:16
我查看了例子中的源码，有个offcanvas.css和offcanvas.js需要加载。
offcanvas.css的源码：
/*
* Style tweaks
* --------------------------------------------------
*/
/*html,
body {
overflow-x: hidden; Prevent scroll on narrow devices
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}*/
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
offcanvas.js的源码：
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
在 .html代码中加载这两个文件，样式和行为才能起效。
贴两个代码片段，你可以根据这个代码片段定位到你的代码，做相应修改：
这里调用了样式，button调用了data-toggle方法
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-sm-9">
<p class="pull-right visible-xs">
<button class="btn-xs btn btn-primary" data-toggle="offcanvas">Toggle</button>
</p>
下面是list-group需要加载的样式
<div class="col-sm-3 sidebar-offcanvas" id="sidebar">
<ul class="list-group">
-
- 慕粉4349307
- 2016-12-11 20:39:35
要先给列表添加ID，再给按钮添加data-toggle，data-target属性调用列表
认识响应式布局
132112 学习 · 278 问题
相似问题