引导卡到新的线路响应

Question

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

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

我不想使用列，但我想使用引导卡

例子：

• 普通屏幕

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

片段

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

请参阅JSBin中上述代码的响应式演示。

预览

桌面视图

移动视图