Twitter bootstrap 引导卡到新线响应

我目前正在为一个朋友开发一个网站，我正在使用Bootstrap4Alpha

使用这些卡，我在页面上显示了三张卡，我希望当屏幕变为移动大小时，更改为每行一张卡：

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

例如：

• 普通屏幕

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

• 移动屏幕

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

网址为：

代码示例：

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

---

您可以这样做：

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

烈火
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
阿木赞出租车
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
阿普
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长

片段

烈火
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
阿木赞出租车
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
阿普
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长

经过几个小时的探索，下面的内容对我很有用

如果需要响应卡组，请使用可见性utils强制在不同的视口宽度（断点）上每隔X列换行一次

以下链接提供了更多详细信息

---

您可以使用引导网格。col-md-3和col-sx-12mobile@LalitBhakuni我想用卡片我想用卡片，因为它们很实用data@Mederic请参阅中上述代码的响应演示。你可以在里面使用任何类型的内容。我在网站上更新了，但是我的卡片完全减少了，甚至看不到图片了。@Mederic让我检查一下。我刚查过。你能用

col-sm-4

代替

col-sm

吗？很好，谢谢你的快速回答。如果你还有其他建议，不要犹豫。

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