将bootstrap 4行更改为卡片或卡片组
是一种常见的前端开发需求，可以通过以下步骤实现：
- 首先，确保你已经引入了Bootstrap的CSS和JavaScript文件。可以通过以下方式引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>- 使用Bootstrap提供的卡片组件，将行更改为卡片或卡片组。卡片是一种常见的UI元素，用于展示内容，可以包含标题、图片、文本等。卡片组是多个卡片的集合，可以用于展示多个相关的内容。
下面是一个示例代码，将行更改为卡片组：
<div class="card-group">
<div class="card">
<img src="image1.jpg" class="card-img-top" alt="Image 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is the content of card 1.</p>
</div>
</div>
<div class="card">
<img src="image2.jpg" class="card-img-top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is the content of card 2.</p>
</div>
</div>
<div class="card">
<img src="image3.jpg" class="card-img-top" alt="Image 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">This is the content of card 3.</p>
</div>
</div>
</div>在上面的示例中，我们使用了card-group类将卡片组合在一起。每个卡片都包含一个图片、卡片标题和内容。你可以根据需要自定义卡片的样式和内容。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。了解更多信息，请访问腾讯云云服务器。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和管理大量非结构化数据。了解更多信息，请访问腾讯云对象存储。
请注意，以上答案仅供参考，具体的实现方式和推荐产品可能因实际需求和环境而有所不同。
相关·内容
2回答
我正在使用我的index.html文件中的代码。 {% for post in blog_posts.items %}
<div class="col-sm-6">
<div class="card" >
<div class="card-body">
<h2><a class="card-title" href=" {{ url_for('blog_posts.blog_post'
浏览 18提问于2020-04-25得票数 0
回答已采纳
2回答
我正尝试在单击按钮时添加子div组件(div-row内的div-col)。就像这里，我试图将卡片的方向从网格更改为列表视图。我在这里使用的是bootstrap内置类。 如果是grid view，那么 <div className="row">
{notes.map((item, key) => {
return <Noteitem />;
})}
</div> 如果单击了listview按钮 <div className="row">
<div className="co
浏览 71提问于2021-10-23得票数 0
回答已采纳
1回答
我正在尝试用ReactJS创建一个交互式用户界面，使用的是react-bootstrap。我正在使用卡片和CardGroup。我需要一种方法来自动将卡片排列在新的行中。类似于每行三张卡片，如果我有三张以上的卡片，就为第四张卡片创建一个新的行。 import React, { Component } from 'react';
import {Card,CardGroup} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
const I
浏览 20提问于2019-09-18得票数 1
1回答
我正在尝试使用Vue draggable创建一个卡片生成器。我有一排满是cardElements的，这些可以被拖到卡片生成器。卡片生成器是由单个列表的“桶”组成的矩形。如下所示：
下面是生成元素列表的script：
import draggable from 'vuedraggable'
export default {
name: "clone",
display: "Clone",
order: 2,
components: {
draggable
},
data() {
浏览 6提问于2022-01-14得票数 1
1回答
嗨，我正在用Bootstrap和z索引在我的卡片中做一个悬停效果，但问题是当我在卡片中传递鼠标时，z索引工作得很好，但是我的行失去了他的高度，我试图给我的行增加一个高度，但它固定了，但是我的行失去了响应能力，当我查看其他分辨率时，它看起来有一个很大的空间，我需要它对不同的分辨率起反应，我需要使用位置:绝对；因为我希望它只是推送我需要z的卡片-索引来提高卡片而不是推它。谢谢你读我的书，希望你能帮我
我试图在我的行中增加一个高度，但它失去了响应能力。
.row{
height:300px;
}
.row {
width: 100%;
}
.card {
transition:
浏览 3提问于2022-08-15得票数 -1
我有一张用引导带5制作的卡片。
基本上，我试图在卡片头的左边得到一个标题，在卡片标题的右边有一组按钮，所以这就是我所做的：
<div class="card-header">
<div class="float-start">
<h3>title</h3>
</div>
<div class="float-end">
<button class="btn btn-primary">Add</button>
浏览 1提问于2022-01-11得票数 2
回答已采纳
我正在尝试在Xcode中做一个高/低的纸牌游戏，你可以看到一张卡片，然后通过按下向上或向下按钮来猜测下一张卡片是更高还是更低，如果你猜对了，它会显示一张新的卡片，如果你猜错了，它就会停止，但我有一些问题。有时候，即使我猜错了，它也只是显示一张新的卡片，而不是停止(通常只在猜测向下时发生)我的代码看起来是这样的：
<code>A0</code>
有人看到我做错了什么吗？
浏览 8提问于2019-12-05得票数 0
我有一个很长的bootstrap卡片，上面有两行信息，一个标题和一个描述。然后我想要一个按钮，对齐到这张卡的右侧，居中。我当前的按钮html如下所示： <div class="card card-body">
<h4>I'm a Card</h4>
<p>The button should be central, at the end of this card.</p>
<input type="button"
class="btn btn-outli
浏览 12提问于2020-04-30得票数 1
回答已采纳
Google Plus或Facebook使用的卡片设计方法很棒。我如何使用twitter bootstrap 2.3 (不能使用3)做到这一点，因为我不希望我的卡大小和内容在响应式设计中保持正常？我的意思是，我希望根据屏幕尺寸重新调整卡片的大小，并且卡片上的内容保持可接受。对于这个模糊的问题，我很抱歉。我不知道怎样做才是最好的，问问我脑子里有什么。
任何网站，你可能有卡用户界面设计和使用引导？
是否有任何框架可以帮助桌面web应用程序的Card UI？
浏览 3提问于2013-09-18得票数 5
回答已采纳
1回答
引导4卡水平卷轴发行？
、、、、
我使用引导卡创建一个基本的图像和文本underneath.Decided来使用卡片类，因为它是一个很好的结构，并且不想使用太多的css来水平地创建div列表。我想要的是一个像这样水平滚动的图片库
问题是，当我添加更多的卡片时，卡片的行为会变得越来越小。这里有什么问题？，也许我不应该用卡片组？也许要放弃引导写我自己的？
.card-group {
overflow-x: scroll;
white-space: nowrap;
max-width: 30rem;
padding: 1rem;
}
<!DOCTYPE html>
<
浏览 2提问于2018-11-01得票数 1
回答已采纳
我试图在Bootstrap4折叠卡内水平显示3个图标。我将图标(i标记)添加到卡片中，但它们是垂直显示的。由于某种原因，i元素占据了整行。下面是一个小提琴示例：
我尝试更改css属性，包括：
display: inline;
width: 20px
我还尝试将父div更改为display: flex。所有这些都帮不上忙。对于我如何做到这一点，有什么建议吗？
浏览 1提问于2018-05-23得票数 0
回答已采纳
2回答
我有一个输入表单，其中用户创建自己的“卡片”。数据进入PostgreSQL数据库，我在页面上呈现结果(见下文)。创建卡片后，我希望他们能够选择他们喜欢的卡片，并在下一页(/play)上仅显示这些选定的卡片。
我的代码(我使用pug)：
div(id="all-cards")
div(class='card')
each card in cards
p Title: #{card.title}
p Question: #{card.question}
p Su
浏览 0提问于2017-08-14得票数 1
2回答
我在react js中开发了卡片，这些卡片是基于API数据自动生成的，但是所有的卡片都显示在另一个卡片的下方，我想以行的方式设计那张卡片。我尝试了许多方法，以排的方式设计该卡，但它没有完成。我尝试内联CSS，一些react-bootstrap类。所以请给我一些关于如何设计这张卡片的建议。
class App extends React.Component {
elements = [];
state = {
data:[ null ]
};
getBikes = () => {
try {
return axios.get('URL')
浏览 19提问于2020-02-25得票数 0
回答已采纳
我正在制作WordPress的主题。我用Bootstrap创建的卡片通常需要并排，但是它们都是块元素级别的。我应该怎么做才能保持博客文章并排？
<div class="container mt-5">
<h3><?php bloginfo("name"); ?></h3>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="card-group"
浏览 0提问于2020-11-21得票数 0
我在尝试用ReactJS脚本呈现引导程序元素时遇到了一些问题。为了给出我的用例，我根据从DB创建的一些数据列表来显示卡片。然而，当我循环创建要在“卡片桌面”中显示的“卡片”时，我在浏览器上观察到“卡片-卡片组”是由react正确生成的，而循环中的卡片元素似乎不是由呈现的页面中的react生成的。 function DisplayUnes(){
var i = 0
const nbrArticle = 3
const items = []
const idUnes =
[
1,
2,
3
]
const titleUnes =
[
]
const dat
浏览 4提问于2021-01-05得票数 0
我要做的是创建一个Card排序脚本。基本上，您有一个“卡片”列表，然后您应该将其排序到任意数量的“堆栈”(列表)中。我正在使用jQuery-UI可排序插件，并且能够连接列表以在它们之间拖动。我面临的问题是，我不能想出一种方法，让它检查卡片是否悬停在空格或现有列表上，如果是前者，当我丢弃它时，会创建一个新的列表。
我已经尝试使用draggable/droppable，这样卡片最初就不会局限于可排序的，但我仍然无法让它识别卡片的位置。我也在想，draggable/droppable不是我所需要的，因为那样我就不能将卡片从可排序列表移回原始列表(draggable)。
最终，我将使用jQuery的a
浏览 0提问于2012-01-26得票数 2
回答已采纳
2回答
我是Bootstrap和Django的新手。我正在尝试一张卡片的样式，但是卡片的标题(背景)并不能填充整个卡片的宽度。下面是一个示例：
以下是代码：
<div class="container">
<div class="grid">
<div class="row">
{% for list, content in content.items %}
<div class="card col-md-6 shadow-lg">
<a h
浏览 10提问于2022-05-17得票数 0
回答已采纳
2回答
我正在使用bootstrap 4构建一个网站。我使用的是Bootstrap卡，在这些卡中我有主按钮(btn- primary )。当悬停卡片时，我想同时触发按钮的悬停状态。有没有办法做到这一点？ 我尝试了这个url的答案，但是这不起作用，因为编译器抛出了一个错误，即btn- Can I force an element to display its hover effect?：hover复合选择器可能不再被扩展。它说要考虑@ext.btn-primary，:hover。这是可行的，但这使我的css文件变得很大，因为它扩展了所有类型的悬停，而不是专门针对一个按钮。 有没有其他方法可以触发启动按
浏览 15提问于2021-04-14得票数 0
6回答
无法创建目录错误
、、、
我创建了一个新的子域，并将WAR文件上传到它的目录中，但是服务器返回了以下错误。
java.io.IOException: Unable to create the directory[/home/jack/public_html/WAR/MYWAR]
.....
WAR文件夹和WAR文件的权限为0755。
drwxr-xr-x 4 jack jack 4096 Feb 2 02:43 ./
drwxr-xr-x 10 jack nobody 4096 Jan 25 01:48 ../
drwxr-xr-x 2 jack jack 4096 Jan 24 22
浏览 4提问于2015-02-02得票数 11
每当我选择卡片组件时，我都试图更新详细的组件数据。我正在使用useContext钩子，但我被困在这里，我不知道如何做到这一点。有人能帮忙吗？
context.js
import { createContext, useContext, useEffect, useState } from "react";
import api from "./api/players"
const APIcontext = createContext();
export function Provider({children}){
const [players,
浏览 4提问于2022-08-08得票数 1
回答已采纳
2回答
我正在写一个个人项目，让玩家从一副牌中抽牌。然后玩家激活卡片(有不同类型的卡片，每种卡片都有不同的效果)，最后他将卡片放回卡片组的底部。
到目前为止，我已经成功地从牌组中抽出了这张牌，并将其存储在我的播放器中。假设我只有两种类型的卡片：
class card
{
public:
virtual void activate() = 0;
};
class moveAnywhere : public card
{
public:
virtual void activate();
};
class bonusQuestion : public card
{
public:
浏览 14提问于2019-03-26得票数 0
回答已采纳
我想通过angular2和ng-bootstrap在我的项目中使用卡片和网格布局。
请问ng-bootstrap支持bootstrap4的新功能卡吗？
浏览 0提问于2016-07-18得票数 4
2回答
我们的web应用程序需要一个具有多个卡片的仪表板。这些卡片将链接到其他应用程序/页面等，我们特别想使用bootstrap 3，因为我们没有时间和精力升级到bootstrap 4任何建议代码示例都会有帮助。
浏览 2提问于2018-03-08得票数 18
回答已采纳
1回答
Bootstrap3与简单形式
、、、、
下面的命令将simple_form与twitter引导集成在一起
$ rails g simple_form:install --引导
identical config/initializers/simple_form.rb
create config/initializers/simple_form_bootstrap.rb
exist config/locales
identical config/locales/simple_form.en.yml
identical lib/templates/erb/scaffold/_form.html.erb
浏览 3提问于2014-05-21得票数 1
回答已采纳
嘿，伙计们，我正试着用普通的bootstrap创建一副扑克牌
在我的主文件中定义了卡片组：
<div className="container">
<div className="card-deck">
<MyCard />
<MyCard />
<MyCard />
</div>
这是我的卡片组件：
<div>
<div className="card mb-4">
浏览 2提问于2020-04-09得票数 0
我有下面的引导卡，我想使用一些css来格式化它们(覆盖现有的样式)。
卡码
<div class="card" style="width: 18rem;">
<img src="https://cdn.ymaws.com/cilip.site-ym.com/resource/resmgr/cilip/information_professional_and_news/non_infopro_news/2020_03_coronavirus/coronavirus_header.png" class="card-img
浏览 3提问于2021-01-06得票数 0
2回答
我正在使用react-bootstrap，我想知道是否可以基于代码动态地转到下一行。让我告诉你我想做什么：
// components/WeatherList.js
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import WeatherCard from './WeatherCard'
const WeatherList = ({weathers}) => {
console.log("e")
console.
浏览 0提问于2021-08-19得票数 0
回答已采纳
3回答
这可能会相当简单，但我目前还不知道解决方案。下面是该程序的简要介绍。
该程序显示并允许用户洗牌，然后在用户输入时以洗牌的形式再次显示它们。目前我的输出是单行的，直到它强迫自己在超出窗口大小的情况下生成新的行。
我需要做的是创建4行单独的13张卡片，我用伪代码的方式是：
if(deck[12])
cout << endl;
然而，我很难让它访问迭代器的元素，这样它就可以在13张牌显示后结束这行。下面是我的for循环，它显示了卡片：
for (vector<const string*>::const_iterator it=deck.begin(); it!= dec
浏览 2提问于2013-08-17得票数 0
2回答
引导中卡片的间距问题
、、、
我试着用卡片创建一个简单的网格。我在用ng-重复来制作卡片。问题是每张卡之间没有间隔，如图所示。
我正在使用下面的代码
<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
浏览 2提问于2017-04-10得票数 0
回答已采纳
我的HTML中有一个类似卡片的组件，里面有文本。我的问题是，当我调整页面大小时，卡片会变小，但文本会溢出。我目前使用的是Bootstrap 5，它的h4类如下所示： <div class="card bg-white">
<div class="align-items-center d-flex justify-content-center my-3">
<h1 class="text-primary bold">INFORMACIÓN</h1
浏览 24提问于2021-09-01得票数 0
回答已采纳
5回答
我正在尝试创建一个水平的卡片列表，其中一次显示3张卡片，其他的是水平滚动的，如下所示：
使用CSS可以很容易地做到这一点，但我想使用Bootstrap来完成。是通过材料设计普及的，它们和Bootstrap中的任何其他东西一样易于使用。对于这个例子，它也可以是常规的div，而不是卡。
我正在努力创建一个可滚动的X卡片(或div)容器，其中一次显示3张卡片，其他的溢出到右侧，并且是可滚动的。我不确定如何使用Bootstrap，给卡片(或div)一个宽度，以便一次显示3张，其他的放在右边。
浏览 2提问于2016-03-15得票数 32
我正在使用React Bootstrap，并使用Axios从API中提取数据。我尝试在bootstrap Card / CarDeck组件中显示来自该API的数据。我使用下面的代码实现了大部分功能，但是布局有问题。
我希望能够使卡片组具有响应性，并根据屏幕大小显示每行灵活的卡片数量。目前，如果回复中有很多项目，那么每张卡片都薄得离谱，无法查看。执行此操作的正确方法是什么？
import React, { useState, useEffect } from "react";
import CardDeck from "react-bootstrap/CardDeck&#
浏览 1提问于2020-09-05得票数 3
我正在尝试访问bootstrap card元素，以便在使用搜索功能时可以隐藏其显示。目前，我在中访问卡片内部的元素，以便在执行过滤器搜索时折叠卡片时隐藏该元素。这样做的问题是，在bootstrap元素中会产生大量的空白区域，当您选择靠近底部的卡片时，这些空白区域会增加。下面的图片描述了这个问题。我也会在下面向你展示我不成功的解决方案。 以下是页面未折叠时的外观： ? 下面是页面折叠后的样子： ? 这是我的部分的html代码： <div class="container pt-3 pb-3">
<div class="form-outl
浏览 23提问于2021-06-20得票数 1
回答已采纳
3回答
我正在制作一个博客应用程序，你可以在这里看到它。https://6t61y.csb.app/ (有关源代码，请单击底部的沙箱按钮) 我想一次展示2张卡片，下面还有2张卡片，就像this设计一样。如何做到这一点？ 我读了几篇类似的帖子，但都没有对我起作用。(这可能是一些类似帖子的副本)。对于这样的问题，有没有什么经验法则需要记住，因为我作为一个初学者经常会遇到这个问题？ 注意:我没有使用任何外部UI库，比如bootstrap of material UI。所以我不能使用Grid item sm=6 sm=6之类的技术。
浏览 26提问于2021-05-09得票数 0
我们有一张正在扫描的卡片，卡片上打印了ZZZZ_ss16，并扫描为ZZZZ0%ss16。由于印刷错误，用户最初用错误的号码注册卡片。重新打印卡片将是很好的，但不是一个选择。
我有一个javascript正则表达式，它应该可以做这项工作，但我有困难翻译这与dotnet的工作。
s/^(\w{4}).(\w{4})/\10%\1/
我们只需要前4个字符，用0%替换_，然后是最后4个字符。
希望有人能帮上忙。
浏览 2提问于2016-05-25得票数 1
我正在尝试从bootstrap添加一些卡片到网站，以显示产品的图像及其价格和选项，然后添加到购物车，但由于此卡片中的图像是从另一个网站检索的，当我试图加载我的页面时，图像太大，卡片不会自动调整浏览器窗口的大小，因此它显示一个在另一个之上：
浏览 12提问于2020-06-03得票数 0
使用Bootstrap卡片，我试图浮动一张卡片-img左边，卡片主体右边，但float类对我不起作用。有人能告诉我我哪里做错了吗？
<div class="container">
<div class="row row-eq-height">
<div class="col">
<div class="card" style="">
<img class
浏览 6提问于2018-08-25得票数 0
回答已采纳
1回答
我在Bootstrap中有一行，其中包含几列，我想在内容周围添加阴影效果，以使元素在“卡片”中组合在一起。问题是，当我将shadow-sm添加到Row的父组件的className属性中时，卡片看起来非常宽，因为Row组件伸展到容器的两边。内容不像行那样宽，因此当前的效果使它看起来松散地包含在卡片中。如何才能使行只占用所需的空间？ Reference JSFiddle
浏览 11提问于2021-06-26得票数 1
StandardCardRenderer的所有卡片样式都有哪些？App SDK只列出了BasicCardRendered的卡片样式，包括：
.cardboard .card:赋予每个卡片元素的样式.cardboard .cardHeader:赋予每个卡片头部元素的样式.cardboard .cardOwner:赋予卡片头部中的所有者图像元素的样式.cardboard .cardOwnerName:赋予卡片头部中的所有者姓名元素的样式.cardboard .cardContent:赋予卡片内容元素的样式.cardboard .defect .cardHeader，.cardboard .defe
浏览 0提问于2012-01-04得票数 2
回答已采纳
在图像上，如图所示，如何在每个页面中使用旋转木马创建这样的卡片，它将显示为3，在移动模式下，它将显示为一张卡片，如何使用Bootstrap或不使用bootstrap进行创建有任何建议？
浏览 15提问于2017-08-09得票数 0
4回答
我正在尝试做一个扑克游戏，想要在我的ArrayList“打牌”和有另一个名单“手”之间传输数据。我已经硬编码了我的列表，将所有52张牌都包含在一副标准牌中，并希望通过引用牌在牌组中的位置将列表中的第一张牌弹出到列表手牌中。由于洗牌，我不能引用卡片的名称来转移它，只需要卡片的位置来转移到手中。有没有人知道一个函数来做这件事，一种硬编码的方法，或者甚至在哪里查找。如果需要的话，我可以澄清任何事情。
浏览 0提问于2012-01-29得票数 2
回答已采纳
我想使用两种不同的切割机在我的权力bi仪表板；这两个星期来计算每周的增长。我的问题是，我不知道如何将这两台切割机与我的数据连接起来来计算增长率。
我没有资格发送图片：)(对此我很抱歉)
例如:如果我在上面的切片器中选择了第3周，在底部切片器中选择了第2周，则卡片框将返回这两周之间的增长率。
浏览 2提问于2022-06-14得票数 1
1回答
我的引导页面上有一张卡片 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card">
浏览 5提问于2019-09-09得票数 1
回答已采纳
2回答
我使用vue-bootstrap，我有几张卡片，每张卡片上都有一个按钮，这些卡片上的每个按钮都应该把我带到一个不同的表单，问题是我不知道如何让这些按钮将我带到这些表单所在的URL，这是我的代码： <b-card
v-for="item in cards"
:key="item.id"
:title="item.title"
:img-src="item.imagen"
tag="article"
style="max-width: 17rem;"
class=&#
浏览 11提问于2020-04-10得票数 0
2回答
我尝试在cakephp中执行我的第一个应用程序，但它给出了一个错误
Fatal error: Uncaught exception 'CacheException' with message 'Cache
engine _cake_core_ is not properly configured.' in
/opt/lampp/htdocs/CakeTooDoo/lib/Cake/Cache/Cache.php:166 Stack trace:
#0 /opt/lampp/htdocs/CakeTooDoo/lib/Cake/Cache/Cache.php(13
浏览 0提问于2013-07-02得票数 1
回答已采纳
使用react-bootstrap如何让卡片背景图像填满整个卡片，同时在不挤压图像的情况下强制最小高度？我希望Bootstrap缩小图像，直到达到最小高度，然后裁剪图像，如果需要保持最小高度，同时保持图像的纵横比(即:不挤压图像)。
浏览 1提问于2021-02-26得票数 1
1回答
我正在尝试为我的ubuntu服务器VPS的Apache和TOMCAT服务使用“让我们加密证书”。
我发现在哪里有letsencrypt存储的证书查看apache配置，它是由certboot脚本编写的，Apache很好地使用了这个cert。
对于tomcat server.xml配置，我使用了相同的链接，但是在其日志中有一个拒绝权限的错误：
SEVERE: Failed to initialize end point associated with ProtocolHandler ["http-apr-8443"]
java.lang.Exception: Unable to l
浏览 0提问于2017-10-11得票数 1
回答已采纳
我有一个元素数组，其中每个元素都是某个游戏中的一张牌，并且我成功地根据另一个数组过滤了这些牌，如下所示： let regions = ['Noxus', 'Demacia', 'Shadow Isles', 'Freljord', 'Ionia', 'Piltover & Zaun']
filteredByRegion(cards){
return cards.filter((card) => {
return this.regions.includes(c
浏览 13提问于2020-02-01得票数 0
回答已采纳
我正在用Bootstrap 4卡和它们的响应行为进行实验。我的目标是有两个水平的Bootstrap卡水平堆叠，只折叠成垂直卡是较小的视口大小的移动屏幕兼容。虽然我可以使用标准的bootstrap代码来实现这一点，但在变成垂直的卡片之前，卡片首先缩小大小以匹配减少的视口，偏离我的图片的中心。有没有什么办法可以让我在一个更大的视窗中强制水平卡片进入竖直卡片样式？
HTML：
<div class="container-fluid">
<div class="card-deck justify-content-center"&
浏览 1提问于2020-07-21得票数 0
我使用的是react-bootstrap，我有4张卡片，我想在桌面版本中一行展示它们，在平板版本中在一张raw中展示2张卡片，而不是在一列中显示所有的卡片。下面是我的代码： import Card from 'react-bootstrap/Card'
<Card className="card">
<Card.Img variant="top" src={skill.content.image}/>
<Card.Title>
<h4>{skill.content
浏览 24提问于2020-07-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
