0

我是初学者，刚开始使用 react js 构建应用程序。我需要整理卡片并把它做成中等大小。我想要下面这样的卡片，任何帮助将不胜感激。提前致谢

预期图像

但我越来越像我被困在这里了。

现实

这是我的代码

render() {
    return ( 

        { /*heading starts */ } <
        div style = {
            {
                paddingTop: 150,

                paddingLeft: 70,

                color: 'white'
            }
        } >
        < div style = {
            {
                position: 'absolute',
                paddingLeft: 260,
                color: 'black',
                top: 90,
            }
        } >
        < CardGroup >
        <Card >
        <Card.Img variant = "top"
        src = "./image/free.png" / >
        < Card.Body >
        <Card.Title > Free < /Card.Title> <
        Card.Text >
        in to additional content.This content is a little bit longer. </Card.Text> < /
        Card.Body > <
        Card.Footer >
        <
        small className = "text-muted" > Last updated 3 mins ago < /small> < /
        Card.Footer > 
        </div> 
    );
}
4

2 回答 2

1

我看到所选卡片的高度最长，顶部有阴影和额外的蓝色框。这是你可以做到的。

创建两个 css 类，一个具有所有卡片共有的所有样式，另一个具有附加样式（选中），然后使用状态有条件地添加附加类（选中），这样当用户选择卡片 A 时，它会收到附加样式（选择的类）并在先前选择的卡片中删除它们。

import React, { useState } from "react";
import "./card.css";

const cards = () => {
  const [selected, setSelected] = useState('');
  return (
    <Container>
    <Card className={`normalcard ${selected == "1" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "2" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "3" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "4" ? "selectedcard": ""}`} />
    </Container>
  )
}

export default cards;
.normalcard {
 ...
}

.selectedcard {
  ...normalcard;
  -webkit-box-shadow: 0 0 10px 0 #000000;
    -moz-box-shadow: 0 0 10px 0 #000000;
    box-shadow: 0 0 10px 0 #000000;
}

于 2020-10-17T04:49:34.397 回答
0 
This is my code 


 <
                    div style = {
                        {
        
                            position: 'absolute',
                            paddingLeft: 260,
                            color: 'black',
                            top: 90,
                        }
                    } >
                    <
                    CardGroup >
                    <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Free < /Card.Title> <
                    Card.Text >
                    in to additional content.This content is a little bit longer. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This card has supporting text below as a natural lead - in to additional content. { ' ' } <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / > <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card>  <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> < /
                    CardGroup >
                    <
                    /
                    div >
于 2020-10-17T04:37:34.470 回答