我玩引导4,虽然在我无法找到一个解决方案,以增加响应能力卡div用class="card-columns"(本类应用砖石般的效果的卡有这个类的DIV中).
在引导3是容易款式,使"卡片"响应,因为它是可以应用类似class="col-md-3 col-sm-6 col-xs-12"包含一个div thumbnail,caption等等.
在Bootstrap 4中使用卡时如何获得相同的效果？
这是HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 hidden-sm-down" id="map_container">
<p>here we put the map</p>
</div>
<div class="col-md-8 col-sm-12 right_box">
<div class="row">
// here there's code for navbar
</div><!-- row -->
<div class=row">
<div class="card-columns">
<?php
// Create and check connection
if ($result->num_rows > 0) {
// output card design
while($row = $result->fetch_assoc()) {
echo '<div class="card">
<img class="card-img-top" src="dance' . $row["id"] …我的 vue 组件是这样的：
<template>
...
<b-card-group deck deck v-for="row in formattedClubs">
<b-card v-for="club in row"
:title="club.description"
img-src="http://placehold.it/130?text=No-image"
img-alt="Img"
img-top>
<p class="card-text">
{{club.price}}
</p>
<p class="card-text">
{{club.country}}
</p>
<div slot="footer">
<b-btn variant="primary" block>Add</b-btn>
</div>
</b-card>
</b-card-group>
...
</template>
<script>
export default {
data: function () {
return {
clubs: [
{id:1, description:'chelsea', price:1000, country:'england'},
{id:2, description:'liverpool', price:900, country:'england'},
{id:3, description:'mu', price:800, country:'england'},
{id:4, description:'cit', price:700, country:'england'},
{id:5, description:'arsenal', price:600, country:'england'},
{id:6, description:'tottenham', price:500, country:'england'},
{id:7, description:'juventus', price:400, country:'italy'},
{id:8, description:'madrid', price:300, …我目前正在为一个朋友开发一个网站，我正在使用 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 …我使用卡片组每行显示4张卡片:
<div class="row">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
<div class="row">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
...
每个甲板内的卡片宽度相同,但甲板不是,即第2排甲板比第1排甲板宽.如何让甲板宽度相同？
我尝试过设置.card-decks{width: 100%;},适用于整行,但会扭曲只有1-2张卡的行卡.
附加CSS:我的图像大小不同,这就是我添加以下CSS以使它们相同的原因.没有其他CSS会影响卡:
.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
此外,我想保持风格响应,所以希望避免硬编码像素设置像素宽度.