发现列表挤下去了
慕粉4410136
2016-12-02 01:25
代码和老师的一样，为什么右边列表挤下去了
2回答
-
- Joker_JOkes
- 2017-03-19 00:30:35
我查看了例子中的源码，有个offcanvas.css和offcanvas.js需要加载。
建议使用chrome浏览器，使用开发者工具查看网页源码学习
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">
-
- qq_banbanban_0
- 2016-12-04 19:15:28
老师的代码不全 还没 设置 按钮功能 所以是垂直排序
认识响应式布局
132112 学习 · 278 问题
相似问题