Css 两侧（左侧和右侧）的引导示例

我正在努力为双方做工作。到目前为止，我设法使它在两侧滑动，但由于某些原因，我对css不是很在行，菜单没有放在它们应该放的地方。在bootply中有非常相似的模板，所以这里是非常相似的示例

$（文档）.ready（函数（）{
$（'[data toggle=“offcanvas”]'）。单击（函数（）{
$（'.row offcanvas both'）.toggleClass（'leftActive'）；
});
$（'[data toggle=“offcanvas right”]'）。单击（函数（）{
$（'.row offcanvas both'）.toggleClass（'rightActive'）；
});
});
正文{
填充顶部：51px；
}
.文本中心{
填充顶部：20px；
}
.col-xs-12{
背景色：#fff；
}
#边栏{
身高：100%；
右边填充：0；
填充顶部：20px；
}
#侧栏导航{
宽度：95%；
}
#侧边栏李{
边框：0#F2F2实心；
边框底宽：1px；
}
/*折叠边栏样式*/
@媒体屏幕和屏幕（最大宽度：767px）{
一排帆布{
位置：相对位置；
-webkit过渡：所有0.25秒都可以轻松过渡；
-moz转换：所有0.25秒都会变慢；
过渡：所有0.25秒都放松；
}
.右行
.侧边栏{
右图：-41.6%；
}
.左一行
.侧边栏{
左-41.6%；
}
.row-offcanvas-right.active{
右：41.6%；
}
.row-offcanvas-left.active{
左：41.6%；
}
.侧边栏{
位置：绝对位置；
排名：0；
宽度：41.6%；
}
#边栏{
填充顶部：0；
}
/*我试着让双方都发挥作用*/
.两行
.画布右侧的侧边栏{
右：-75%；/*9列*/
}
.两行
.左侧的侧边栏{
左：-75%；/*9列*/
}
.row-offcanvas-both.rightActive{
右：75%；/*9列*/
}
.row-offcanvas-both.leftActive{
左：75%；/*9列*/
}
#右侧边栏{
身高：100%；
右边填充：0；
填充顶部：20px；
}
#右边的边栏，导航{
宽度：95%；
}
#侧边栏右李{
边框：0#F2F2实心；
边框底宽：1px；
}
#右侧边栏{
填充顶部：0；
}
}

正确的
左边






收缩宽度以折叠边栏
Lorem ipsum dolor sit amet，是一位杰出的献身者。nisi eu arcu tempus车辆中的相位。
矢状体中的无尾黄鳝（nullafaucibus cursus metus）。努克精英狮子座，在利古拉的饮食，euismod varius est。
埃尼安·佩伦茨克·洛雷姆是一个左撇子。前庭位置：大鼠rutrum fringilla。多尼克
阿尔库·利奥，坦帕斯·阿迪皮斯，普卢斯的康格。佩伦茨克权杖马蒂斯尼布维尔
森佩尔。这是一道菜。枕叶、颜面后角、额前角、额后角
这是我的心愿。你的生命就是你的生命，你的生命就是你的生命。
南奈克·泰勒斯，东部的特里斯提克，人马座的康格·特皮斯。拉奥里特·达皮布斯无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾无尾
奥迪奥·维塔，波苏尔·帕特·麦格纳。Nam pulvinar lacus位于sapien feugiat，位于amet前庭enim
埃利芬德。整块地坐在一个拍卖行前，拉齐尼亚·塞姆·奎斯（lacinia sem-quis）坐在一块地上

前庭门楣按摩器。暂挂，nisi eu placerat拍卖行，
这是一段时间，威尼斯人的爱欲之情。水母。
这是我的财富，这是我的财富。利尿失禁
在马氏矢状隙中。悬钩子非purus直径。猫坐在阿梅特托托教堂
阿迪皮斯瓦里乌斯。这是一种发酵剂。Donec vulputate，tellus sed
苏打威尼斯人、乌拉姆科珀家族、艾美特·特里斯蒂克家族和莫利特·莫利斯特家族

这是一种很好的解决方案。同侧前庭
tincidunt eu，lobortis vitae erat。ultricies边缘菌ultricies。塞德·尤伊斯莫·尼布·奎斯
达比布斯丁奇登。在维利特广场（NullaQuamVelit）、埃米特猫之门（PortaSitAmetFelisEU）、弗林斯利亚精英拍卖行（AuctorFringillaElit）。多尼克
康瓦利斯·汀西顿·尼布（convallis tincidunt nibh），是一种智慧的调味品a。褐飞虱
身份证、身份证、身份证等。我是阿利奎特·波苏尔·阿库·奥纳雷。佩伦茨克自由党
我是accumsan先生。这是一个很好的例子。Nam elementum ac eros eu porttitor。
Phasellus enim mi，拍卖人：amet luctus a，commodo Fentum arcu。在巴黎
夸姆，nec拉齐尼亚自由党

这是一个很好的例子。欧盟莫里斯·波苏尔（Nullam cursus dolor tempus mauris posuere）
权杖。在sem pulvinar的勃朗迪特·萨皮恩餐厅用餐，在orci varius餐厅用餐。
在你的面前，你的生命是永恒的。毛里斯一世无生命
罗恩卡斯·韦尔胡斯托。Donec iaculis quis sapien vel molestie。奥奇元素。
前庭暂时性三叉神经。这是一个很好的例子。
tempus时的整数accumsan ac massa







代码中存在一些严重错误和不必要的css

冷杉
$('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas-both').toggleClass('leftActive');
});

$('[data-toggle="offcanvas-right"]').click(function () {
    $('.row-offcanvas-both').toggleClass('rightActive');
});

<ul class="nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>              
</ul>