如何在 React 中为整个列设置背景颜色

Question

我正在尝试实现一个包含多列的卡片组件，其中第一列设置为编辑按钮，最后一列设置为详细信息按钮。像这样的东西

我正在使用 reactstrap 库来执行此操作，但我无法将背景设置为卡片的整个高度，而不仅仅是列高。这是我的代码

import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button
} from 'reactstrap';
return (<Card style={{
            textAlign: "left",
            margin:"3%",
            padding:"3%"
          }}>
          <Row style={{
              display: "flex"
            }}>
            <Col sm="3">
              <CardImg top="top" style = {{width:"80%", margin: "0.1rem"}} src={logo} alt="Card image cap"/>
            </Col>
            <Col sm="9">
              <CardBody>
                <CardTitle tag="h5" style={{fontWeight:"bold"}}>Project title</CardTitle>
                <Row style = {{display: "flex"}}><Col sm="6">{data.profName}</Col>
                 <Col sm="6">{data.dept}</Col>
                 </Row>
                <CardText style={{color:"#000000"}}>{data.description}</CardText>
                <Row style={{
                    display: "flex",
                    fontSize:"20px"
                  }}>
                  <Col sm="3" style={{alignItems:"center"}}><img src="a1.png" alt="" style={{width:"20%"}}/>{data.duration} months</Col>
                  <Col sm="3" style={{alignItems:"center"}}><img src="a3.png" alt="" style={{width:"20%"}}/>{data.totalSlots} students</Col>
                  <Col sm="3" style={{alignItems:"center"}}><img src="a2.png" alt="" style={{width:"20%"}}/>INR {data.stipend}</Col>
                  <Col sm="3" style={{background:"rgb(15, 135, 151)", padding:"0", margin:"0"}}>
                    <center>
                    <Link to ={"/Projects/" + data["project-uid"]}><Button style={{
                        backgroundColor: "#0F8797",
                        color: "white"
                      }}>Details</Button></Link>
                      </center>

                  </Col>
                </Row>
              </CardBody>
            </Col>
          </Row>
        </Card>);

这使得详细信息按钮看起来像这样

Answer 1

你为什么不试试把按钮放在卡片外面？您可以创建一个包含卡片的行，该卡片之前有一个按钮，之后有一个按钮。按钮将是行的整个高度，您可以使行弯曲并将 flex-grow 应用于卡片，按钮具有固定宽度。

如何在 React 中为整个列设置背景颜色

How to set a background color to the whole column in React

inline-styles

reactjs

reactstrap