2016-08-21 26 views
0

卡盒我嘗試創建一個引導卡+ animate.css創建Twitter的引導和animate.css

請與谷歌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> 

我希望當我將鼠標移到卡上,出現一個紅色按鈕。然後消失。

我做到了。

現在當我點擊按鈕時,它會打開一個模式框。

我做到了!

但是,這是我的問題:

當我關閉模式對話框,卡contaners漂浮到左!

這裏是一個演示:https://jsfiddle.net/1pyeg7w2/

我不就解決了。

回答

0

我包你div.shop-card.well內容與另一分度position:relative規則,它似乎是工作

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