如何使Bootstrap"卡"响应

Question

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/

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

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,如果你需要它全宽只需添加 <div class="container-fluid">

Answer 2

您应该更具体地了解您的需求，但我认为这有帮助：

@media screen and (max-width:768px) {
img {
    width:100%;
}
.container {
    max-width:100%;
    width: 100%;
}
.col-md-3{
    width:100%;
    float:left;
    margin:0;
}
}

<div class="row">
        <div class="col-md-3">
            <div class="card card-inverse card-primary text-center">

            </div>
        </div>

...

https://jsfiddle.net/6hpqo2u8/1/

您还可以更新您的 html：

<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">...</div>