Как разместить класс blue (
) в середине Col колонки(<Col style={{ backgroundColor: “black” }}>)?
import React from "react";
import ReactDOM from "react-dom";
import { Row, Col } from "react-bootstrap";
import Container from "react-bootstrap/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
class Con extends React.Component {
constructor(props) {
super(props);
this.state = {
class: "blue"
};
this.press = this.press.bind(this);
}
press() {
let className = this.state.class === "blue" ? "pink" : "blue";
this.setState({ class: className });
}
render() {
return (
<div>
<Container>
<Row>
<Col style={{ backgroundColor: "black" }}>
<p onClick={this.press} className={this.state.class} />
</Col>
<Col style={{ backgroundColor: "yellow" }}>
<p onClick={this.press} className={this.state.class} />
</Col>
<Col style={{ backgroundColor: "pink" }}>
<p onClick={this.press} className={this.state.class} />
</Col>
</Row>
</Container>
</div>
);
}
}
export default Con;
.App {
font-family: sans-serif;
text-align: center;
width: 100%;
}
#root1 {
width: 100%;
}
.blue {
content: " ";
justify-content: space-around;
margin-top: 6%;
margin-bottom: 3rem;
height: 23rem;
width: 15rem;
background: green;
position: relative;
border: 5px solid #1e90ff;
border-top: none;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.pink {
content: " ";
margin: 1.2%;
margin-top: 6%;
margin-bottom: 110px;
height: 378px;
width: 280px;
background: green;
position: relative;
border: 5px solid #dc143c;
border-top: none;
border-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
