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”>
