Javascript 将商店小部件的样式设置为完全不同
我有一个商店小部件，它不是我从我的会员网络中得到的最吸引人的，但是我想改变它的外观，使它看起来更干净、更好。如果访问JSFIDLE并删除css，则可以看到原始小部件。现在我正在使用ChromeDeveloper和css来更改小部件的外观。但我现在陷入困境，因为我不知道如何在小部件中的不同项目之间添加空间。我想每行4或5个项目之间有一些空间。有点像这个站点（），但是没有黑色边框和悬停信息。她和我使用相同的小部件，所以我知道可以用不同的样式。有人能帮我把它弄成这样吗 jsfiddle-Javascript 将商店小部件的样式设置为完全不同,javascript,css,widget,styling,Javascript,Css,Widget,Styling,我有一个商店小部件，它不是我从我的会员网络中得到的最吸引人的，但是我想改变它的外观，使它看起来更干净、更好。如果访问JSFIDLE并删除css，则可以看到原始小部件。现在我正在使用ChromeDeveloper和css来更改小部件的外观。但我现在陷入困境，因为我不知道如何在小部件中的不同项目之间添加空间。我想每行4或5个项目之间有一些空间。有点像这个站点（），但是没有黑色边框和悬停信息。她和我使用相同的小部件，所以我知道可以用不同的样式。有人能帮我把它弄成这样吗 jsfiddle- .bo花园
.bo花园{
保证金：0自动！重要；
宽度：100%！重要；
溢出：可见！重要；
最小宽度：700px！重要；
}
博克斯先生{
背景：无！重要；
边界：没有！重要；
}
.bo-con:之后，.bo-con:之前{
背景：无！重要；
}
img.bo-img{
宽度：200px！重要；
高度：300px！重要；
}！函数（d，s，id）{var e，p=/^http:/.test（d.location）''http'：'https'；if（！d.getElementById（id））{e=d.createElement（s）；e.id=id；e.src=p+'：/'+'widgets.rewardstyle.com'+'/js/body.appendChild（e）；}if（typeof window.\uu精品='object'）'）if（d.readate='complete='window（）='complete.）{initu}}（文档“脚本”、“精品脚本”）；此浏览器中当前禁用了JavaScript。请重新激活它以查看此内容。.bo-garden {
min-height: 5055px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.bo-con {
margin: 0!important;
position: relative!important;
top: 0!important;
left: 0!important;
width: 30%;
}
.bo-con.bo-img{宽度：200px！重要；高度：300px！重要；}.bo img{max width:200px；max height:300px}