使用 twitter-bootstrap 和 animate.css 创建卡片盒答案

【问题标题】：create card box with twitter-bootstrap and animate.css使用 twitter-bootstrap 和 animate.css 创建卡片盒
【发布时间】：2016-08-21 20:16:31
【问题描述】：

我尝试用 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/

我解决不了。

【问题讨论】：

标签： html css twitter-bootstrap animate.css

【解决方案1】：

我用另一个具有position:relative 规则的 div 包装了您的 div.shop-card.well 内容，它似乎正在工作

<div class="shop-card well">
    <div style="position:relative">
        your content here
    </div>
</div>

【讨论】：