html - 如何使用 bootstrap 3.3.7 在悬停时放大/弹出 bootstrap 卡

Question

这里我正在尝试的是我在这里显示 3 个 Bootstrap 卡我想要实现的是在卡上悬停时卡必须缩放或弹出而不使用 j 查询/java 脚本。 通过使用 css 我可以实现但是如何在 Bootstrap 中实现

下面是我使用css的mycard代码

<div>
                <article class="plan">
                    <h1>FREE</h1>
                    <h2>$0/month</h2>
                    <h3>For hobby projects or small teams.</h3>
                    <ul class="plan__features">
                        <li>1 Workspace</li>
                        <li>Unlimited Traffic</li>
                        <li>10GB Storage</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan plan--highlighted">
                    <h1 class="plan__annotation">RECOMMENDED</h1>
                    <h1>PLUS</h1>
                    <h2>$29/month</h2>
                    <h3>For ambitious projects.</h3>
                    <ul class="plan__features">
                        <li>5 Workspaces</li>
                        <li>Unlimited Traffic</li>
                        <li>100GB Storage</li>
                        <li>Plus Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan">
                    <h1>PREMIUM</h1>
                    <h2>$99/month</h2>
                    <h3>Your enterprise solution.</h3>
                    <ul class="plan__features">
                        <li>10 Workspaces</li>
                        <li>Unlimited Traffic</li>
                        <li>Unlimited Storage</li>
                        <li>Priority Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
            </div>

Answer 1

您正在寻找这个解决方案吗？？

h1 { font-size: 170% !important; }
h2 { font-size: 150% !important; }
h3 { font-size: 130% !important; }
h4 { font-size: 110% !important; }

article.plan { 
 margin: 20px; 
 border: #ddd solid 1px; 
 background: #f4f4f4; 
 font-size: 14px;
 padding: 10px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
}

article.plan:hover { 
 margin: 12px; 
 font-size: 15px;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-4">
    <article class="plan">
      <h1>FREE</h1>
      <h2>$0/month</h2>
      <h3>For hobby projects or small teams.</h3>
      <ul class="plan__features">
        <li>1 Workspace</li>
        <li>Unlimited Traffic</li>
        <li>10GB Storage</li>
        <li>Basic Support</li>
      </ul>
      <div>
        <button>CHOOSE PLAN</button>
      </div>
    </article>
  </div>
  <div class="col-4">
    <article class="plan plan--highlighted">
      <h1 class="plan__annotation">RECOMMENDED</h1>
      <h1>PLUS</h1>
      <h2>$29/month</h2>
      <h3>For ambitious projects.</h3>
      <ul class="plan__features">
        <li>5 Workspaces</li>
        <li>Unlimited Traffic</li>
        <li>100GB Storage</li>
        <li>Plus Support</li>
      </ul>
      <div>
        <button>CHOOSE PLAN</button>
      </div>
    </article>
  </div>
  <div class="col-4">
    <article class="plan">
      <h1>PREMIUM</h1>
      <h2>$99/month</h2>
      <h3>Your enterprise solution.</h3>
      <ul class="plan__features">
        <li>10 Workspaces</li>
        <li>Unlimited Traffic</li>
        <li>Unlimited Storage</li>
        <li>Priority Support</li>
      </ul>
      <div>
        <button>CHOOSE PLAN</button>
      </div>
    </article>
  </div>
</div>