我目前正在为一个 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%;
}
最佳答案
你可以这样做:
<!-- 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
关于twitter-bootstrap - Bootstrap Card 到新线路响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43538427/