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

【问题标题】：How to set a background color to the whole column in React如何在 React 中为整列设置背景颜色
【发布时间】：2021-09-16 11:03:09
【问题描述】：

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

我正在使用 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>);

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

【问题讨论】：

标签： reactjs reactstrap inline-styles

【解决方案1】：

你为什么不试着把按钮放在卡片外面呢？您可以制作一行，其中包含卡片，前面有一个按钮，后面有一个按钮。按钮将是行的完整高度，您可以使行 flex 并将 flex-grow 应用于卡片，按钮具有固定宽度。

【讨论】：

为我工作！谢谢