html - 如何使 Bootstrap "Cards"响应

Question

Bootstrap 最近提供了一个名为“卡片”的功能，在到达 747px 视口(viewport)之前，一切都很酷。请参见下图。

如您所见，一切都乱七八糟，容器放不下。是否有任何 CSS 修复可以确保它们在 747 像素及以下看起来不错？？？

这是我的 HTML:

<div class="row">
    <div class="col-md-3">
    <div class="card">
      <img class="card-img-top" src="img/card1.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #1</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card card-inverse card-primary text-center">
      <img class="card-img-top" src="img/card2.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #2</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>


<div class="col-md-3">
    <div class="card card-inverse card-success text-center">
      <img class="card-img-top" src="img/card3.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #3</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card card-inverse card-info text-center">
      <img class="card-img-top" src="img/card4.jpg" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">This is Card #4</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
    </div>
    </div>
</div>

</div>

查看我的 JSFIDDLE:https://jsfiddle.net/a9wav5g1/1/

有什么想法吗？？？如何解决这个问题？

Answer 1

如果您只是谈论不适合包含 div 的图像，只需添加

img{
  width:100%;
  height:auto;
}

到您需要的图像或类img-responsive

Codepen http://codepen.io/noobskie/pen/WQQZVQ?editors=110

更具体地说

.card-img-top{
  width:100%;
  height:auto;
}

对于conatiner div，如果你需要它的全 Angular ，只需添加<div class="container-fluid">