自从我开始写HTML以来,我对CSS和Bootstrap在屏幕上定位和调整元素方面的经验一直非常可怕。在我的React项目中,我只是尝试将2个元素并排放置在屏幕上,左侧元素需要占据屏幕宽度的80%,右侧元素需要占据屏幕宽度的20%。很明显,为了能够做到这一点,Bootstrap需要写4周的代码,提问20多个问题并且还要祭人。
下面是主应用组件,其中包含标签和一个,里面有和。
下面是主应用组件,其中包含标签和一个,里面有和。
import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
class App extends Component {
state = {};
render() {
return (
<React.Fragment>
<Container>
<Row>
<Col>Hello</Col>
<Col>Hello2</Col>
</Row>
</Container>
</React.Fragment>
);
}
}
export default MainContent;
期望结果?Hello
将位于屏幕左侧,Hello2
将位于屏幕右侧中央位置。就像文档这里所建议的那样。
但是当然并没有发生。该行在屏幕中央居中对齐,并且总宽度约为屏幕大小的一半。
举个例子:25% 空白 | Hello1 | Hello2 | 25% 空白
老实说,我不知道该怎么办。将边距设置为0会将其放置在屏幕左侧,但仍不是全宽。
有人请帮帮我,我已经快崩溃了:(