twitter-bootstrap - Bootstrap Card 到新线路响应

Question

我目前正在为一个 friend 开发一个网站，我正在使用 Bootstrap 4 alpha。

使用卡片我在页面上显示了三张卡片，我希望当屏幕变为移动尺寸时每行更改为一张卡片:

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

例子:

• 普通屏幕

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

• 手机屏幕

  +++ 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%;
}

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中上述代码的响应演示.

预览

桌面 View

移动 View