我要变更有3栏的网页版面配置:
<div>
<div class="container">
<div class="row" >
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
...单击按钮时变为4列:
<div>
<div class="container">
<div class="row" >
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
我不知道该怎么做。
4条答案
按热度按时间wribegjk1#
有很多方法可以添加另一个div。下面是我的方法:
第一个
eivnm1vs2#
有几种方法可以做到这一点,这取决于您的数据,但是,这里有一个Angular 。
如果你在页面上同时加载了4列和3列版本的数据(但是其中一个被css隐藏了),你可以运行类似这样的代码。
HTML格式
Javascript语言
CSS格式
gmol16393#
使用
forEach
和appendChild
方法。第一个
1hdlvixo4#
如果您只使用普通的HTML、CSS和JavaScript,那么实现这一点的方法之一是预先向按钮添加一个单击侦听器。FYI:为了简洁起见,我将使用
row
类调用div元素作为parent。1.删除
col-md-4
类并将col-md-3
类添加到parent的所有子元素。1.在parent中添加一个包含
col-md-3
类的div元素。这里有一个到codepen的link供您参考。
第一个