Bootstrap卡片响应式换行

Question

我目前正在为朋友制作一个网站，使用的是Bootstrap 4 alpha。

我使用Cards在页面上显示了三张卡片，并希望当屏幕变成移动尺寸时，每行只显示一张卡片：

我不想使用列，但我想使用Bootstrap Cards

示例：

• Normal Screen

  +++ CARD 1 +++ +++ CARD 2 +++ +++ CARD 3 +++
  

• Mobile screen

  +++ CARD 1 +++
  
  +++ CARD 2 +++
  
  +++ CARD 3 +++
  

网站链接是：http://www.smitefr.mmo-stream.net/index.php

代码示例：

<div class="row">
            <div class="card">
            <img src="images/dieux/Agni.jpg" alt="Card image cap">
            <h1> Agni</h1>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div><div class="card">
            <img src="images/dieux/AhMuzenCab.jpg" alt="Card image cap">
            <h1> Ah Muzen Cab</h1>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div><div class="card">
            <img src="images/dieux/AhPuch.jpg" alt="Card image cap">
            <h1> Ah Puch</h1>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
</div>

CSS示例：

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
}

.card > img {
    margin-bottom: .75rem;
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.card-text {
    font-size: 85%;
}

- Mederic

---

你可以使用Bootstrap网格系统中的.col-md-3和.col-sx-12来适配移动端。 - lalit bhakuni

@LalitBhakuni 我想使用卡片。 - Mederic

Answer 1

您可以像这样做：

您可以尝试以下操作：

<!-- Columns start at full width on mobile and bump up to 33.3% wide on desktop -->
<div class="container">
  <div class="row">
    <div class="col-sm col-xs-12">One</div>
    <div class="col-sm col-xs-12">Two</div>
    <div class="col-sm col-xs-12">Three</div>
  </div>
</div>

更新：带有卡片信息：

<div class="container">
  <div class="row">
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=Agni.jpg" alt="Card image cap" />
        <h1> Agni</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhMuzenCab.jpg" alt="Card image cap" />
        <h1> Ah Muzen Cab</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhPuch.jpg" alt="Card image cap" />
        <h1> Ah Puch</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

片段

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=Agni.jpg" alt="Card image cap" />
        <h1> Agni</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhMuzenCab.jpg" alt="Card image cap" />
        <h1> Ah Muzen Cab</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="col-sm col-xs-12">
      <div class="card">
        <img src="//placehold.it/100?text=AhPuch.jpg" alt="Card image cap" />
        <h1> Ah Puch</h1>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

在JSBin上查看上述代码的响应式演示。

预览

电脑视图

手机视图

- Praveen Kumar Purushothaman

---

事实上，我想使用Bootstrap卡片，因为它们非常实用，可以显示数据。 - Mederic

@Mederic 请在JSBin中查看上述代码的响应式演示。您可以在其中使用任何类型的内容。 - Praveen Kumar Purushothaman

@Mederic 让我检查一下。我刚刚检查了一下。你可以使用 col-sm-4 代替 col-sm 吗？ - Praveen Kumar Purushothaman

让我们在聊天中继续这个讨论。 - Praveen Kumar Purushothaman

非常感谢您的快速回答，这很好用。如果您还有其他建议，请不要犹豫。 - Mederic

Answer 2

经过几个小时的探索，以下方法对我有效。

如果您想要一个响应式的卡片组，可以使用可见性工具在不同的视口宽度（断点）上强制每X列换行...

更多细节请参阅下面的链接。 Bootstrap 4响应式卡片组（v 4.1） 基于视口的列数的Bootstrap 4卡片组

- Balasubramanian S