HTML – 如何使Bootstrap“卡”响应

Bootstrap最近提供了一个名为“卡片”的功能,一切都很酷,直到它到达747px视口.见下图.

你可以看到这一切都搞砸了,容器不适合.有没有我们可以做的CSS修复确保它们从747px及以下看起来很好???

这是我的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/

任何的想法？？？如何解决这个问题？

解决方法

如果你只谈论不适合包含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,如果你需要它全宽,只需添加< div class =“container-fluid”>

HTML – 如何使Bootstrap“卡”响应

解决方法

猜你在找的HTML相关文章