我尝试使用bootstrap + animate.css
创建一张卡片请查看google chorme上一版:
<div class="shop-card well">
<h3><a href="/">title 1</a></h3>
<a href="/">
<figure class="figure">
<img class="figure-img img-fluid img-rounded" src="http://wewswiderska.home.pl/images/3dspace.html-i1.png">
</figure></a>
<div class="price">1234 <span class="symbol">R</span>
<del>5678</del>
</div>
<form class="hide buys" id="inform-ordering-5" name="inform-ordering-5" role="form" style="overflow: hidden;position: absolute;left:-1px;width: 100%; bottom: -1px;">
<div class="btn-group btn-group-justified">
<a class="btn btn-danger" data-target="#phoneModal" data-toggle="modal" href="#">modal</a>
</div>
</form>
</div>
我想当我将鼠标移到卡片上时,会出现一个红色按钮。然后消失。
我做到了。
现在,当我点击按钮时,它会打开一个模态框。
我做到了!
但这是我的问题:
当我关闭模态盒时,卡的容器会向左浮动!
这是一个演示:https://jsfiddle.net/1pyeg7w2/
我无法解决它。
答案 0 :(得分:0)
我将div.shop-card.well
内容与另一个包含position:relative
规则的div包装在一起,似乎正在运作
<div class="shop-card well">
<div style="position:relative">
your content here
</div>
</div>