我是ReactJS初学者。在React-Bootstrap中是否有类似于Bootstrap中的间距和边距实用类,比如mt-4
、p-5
、mx-auto
等?
我正在阅读React-Bootstrap文档并在许多平台上搜索,但找不到正确的答案。
我是ReactJS初学者。在React-Bootstrap中是否有类似于Bootstrap中的间距和边距实用类,比如mt-4
、p-5
、mx-auto
等?
我正在阅读React-Bootstrap文档并在许多平台上搜索,但找不到正确的答案。
class Header extends React.Component {
<div className='mt-5'> //margin-top 5px
{..content here}
</div>
}
记得在 index.html 文件中添加 Bootstrap 到你的项目中
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
只需给react-bootstrap组件添加className
即可使用bootstrap工具。
例如:
<Container>
<Row>
<Col>
<Card body outline color="success" className="mx-auto my-2"> <!-- << here -->
<CardImg top width="100%" height="auto" src="images/logo/emblem.svg" alt="slc marksheet image" />
<CardBody>
<CardTitle>SLC Graduation</CardTitle>
<CardSubtitle>2008</CardSubtitle>
<CardText>“Future belongs to those who believe in the beauty of their dreams"- Elenor Roosevelt.</CardText>
<Badge href="https://drive.google.com/open?id=0B3lpzqmId7sSMkpKM01XNlFDUjQ" target="_blank" color="secondary">View Marks</Badge>
</CardBody>
</Card>
</Col>
</Row>
</Container>
不幸的是,由于react-bootstrap基于Bootstrap 3,您无法访问Bootstrap 4助手。
幸运的是,您可以自己实现它们。 :)
在您的CSS中只需创建一个新类:
.mt-1 {
margin-top: 0.25rem !important;
}
现在你的代码中可以使用 className="mt-1"
。
根据你设置CSS的方式,你可能想使用rem、em甚至是px来定义间距。