Javascript 为什么添加引导后代码不起作用

我下面有一个代码，由2个列表

总水果和随机水果组成，带有一个
显示更多/更少按钮
当我删除
引导链接时，代码工作得非常好
，但在我添加它之后，我不确定为什么我的代码完全不工作

我是否在代码中犯了错误或其他什么，因为我真的不知道为什么它不起作用。任何帮助都将不胜感激，谢谢


var redpill={}；
var greenpill={}；
var randompill={}；
var key=“红色水果”；
红丸[钥匙]=苹果、樱桃、草莓、石榴、酸橙、草莓、西瓜、榴莲、鳄梨、酸橙、蜜露、西瓜、苹果、樱桃、草莓、石榴、酸橙、西瓜、榴莲、石榴、酸橙、蜜露、西瓜、苹果、樱桃、草莓、石榴、酸橙、榴莲、Avacado、酸橙、蜜露、西瓜、榴莲、鳄梨、酸橙、蜜露、西瓜、榴莲、鳄梨、酸橙、蜜露]；
var key2=“绿色水果”；
绿丸[key2]=“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”]；
var key3=“随机果实”；
随机药丸[key3]=“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“榴莲”、“蜜露”、“酸橙”、“蜜露”];
函数重画（）{
var combineString=''；
$.each（redpill[key]，函数（index）{
combineString+=（“”+redpill[key][index]+“”）；
});
$（'.combineclass'）.html（combineString）；
$.each（绿色药丸[key2]，函数（索引）{
combineString+=（''+绿色药丸[key2][index]+''）；
});
$（'.combineclass'）.html（combineString）；
var randomString=''；
$.each（随机药丸[key3]，函数（索引）{
randomString+=（''+randompill[key3][index]+''）；
});
$（'.randomclass'）.html（随机字符串）；
}
功能调整高度（）{
defHeight=$（“#leftpanel”）.height（）
$wrap.animate({
高度：除雾高度
}“正常”）；
}
函数侦听器（）{
$（文档）.ready（函数（）{
$（文档）。在（“单击”，suggestid div），函数（）上{
data=this.innerHTML；
$（“.total\u count\u Green\u Fruits”）.html（键2+：“+greenpill[key2].length）；
var元素=$（this.detach（）；
$（'#currentid'）.prepend（''+element.html（）+''）；
调整高度（）
});
});
$（'body'）。在（'click'，'div.new-green-fruit'，function（）上{
data2=this.innerHTML；
$（this.detach（）；
var element2=$（this.detach（）；
$（'#suggestid'）.prepend（''+element2.html（）+''）；
调整高度（）
});
}
重画（）；
监听器（）；
var滑动高度=200；
变压高度
var$wrap
$（“.container”）。每个（函数（）{
var$this=$（this）；
$wrap=$this.children（“.wrapper”）；
defHeight=$wrap.height（）；
如果（定义高度>=滑块高度）{
var$readMore=$this.find（“.readMore”）；
$wrap.css（“高度”，滑动高度+px”）；
$readMore.append（“”）；
$readMore.children（“a”）.bind（“单击”），函数（事件）{
var curHeight=$wrap.height（）；
如果（curHeight==滑块高度）{
$wrap.animate({
高度：除雾高度
}“正常”）；
$（此）.text（“显示较少”）；
$wrap.children（“.gradient”）.fadeOut（）；
}否则{
$wrap.animate({
高度：滑块高度
}“正常”）；
$（此）.text（“显示更多”）；
$wrap.children（“.gradient”）.fadeIn（）；
}
返回false；
});
}
})；
.pilldiv{
填充：8px 15px；
文本对齐：居中；
字体大小：15px；
边界半径：25px；
颜色：黑色；
保证金：2倍；
}
.以后{
内容：“\002B”；
浮动：左；
宽度：16px；
}
.新的绿色水果：之后{
内容：“\292B”；
浮动：左；
宽度：16px；
}
雷德派尔先生{
背景颜色：粉红色；
游标：默认值；
}
格林皮尔先生{
背景色：春绿；
游标：默认值；
}
.随机药丸{
背景颜色：浅蓝色；
光标：指针；
}
.类{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
证明内容：中心；
}
.包装盒{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.顶{
边际下限：20px
}
h3{
字体大小：正常；
}
.小组{
显示：表格；
身高：100%；
宽度：85%；
背景色：白色；
边框：1px纯黑；
左边距：自动；
右边距：自动；
}
.新的绿色水果{
背景颜色：浅蓝色；
光标：指针；
}
.顶{
边缘底部：30px；
}
#左面板{
浮动：左；
宽度：计算（50%-5px）；
背景色：#F2F2；”
}
#右面板{
浮动：对；
宽度：计算（50%-5px）；
背景色：#F2F2；”
}
.集装箱{
显示：表格；
最大高度：100%；
宽度：85%；
背景色：白色；
左边距：自动；
右边距：自动；
边缘顶部：25px；
}
.包装纸{
位置：相对位置；
溢出：隐藏；
填充：10px；
}
.梯度{
宽度：100%；
高度：35px；
背景：url(http://spoonfedproject.com/wp-content/uploads/demo/jquer-slide/images/bg-gradient.png)重复-x；
位置：绝对位置；
底部：0；
左：0；
}
.阅读更多{
背景：#fff；
颜色：#333；
填充物：5px；
}
.多读一点{
右边填充：22px；
字号：700；
文字装饰：无；
}
.阅读更多a:悬停{
颜色：#000；
}

总果数
随机果实
更新.wrapper类以调整盒子大小

.wrapper {
    position:relative;
    overflow:hidden;
    padding:10px;    
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

你必须指定你的类，因为bootstrap的css添加了这个，所以定义你的类
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}