[英]Why my react-bootstrap modal component displays like that?
During the development of my next React app, I had to use a modal component from react-bootstrap. 在开发下一个React应用程序期间,我不得不使用react-bootstrap中的模式组件。 It's actually working fine, but it looks like there are no stylesheets imported?
它实际上工作正常,但看起来好像没有导入样式表?
Here is my code 这是我的代码
import React from "react";
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
class Nav extends React.Component {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: false,
};
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}
render() {
return (
<>
<nav>
<h5>a pack of free css animations</h5>
<ul>
<li><button variant="primary" onClick={this.handleShow}>how to use ></button></li>
<li>
<form method="get" action="file">
<button type="submit">download ></button>
</form>
</li>
<li><a href=".">see on github ></a></li>
</ul>
</nav>
<Modal
show={this.state.show}
onHide={this.handleClose}
aria-labelledby="ModalHeader"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">How to use?</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Once you downloaded <i>animation.min.css</i>, you have to link that to your project.<br />
To do that, use a 'link' tag, or just copy code of animation you like.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}
}
export default Nav;
And it looks like that (Chrome) Click me 看起来像(Chrome) 点击我
Modal is displayed on bottom, text is not centered etc... 模态显示在底部,文本未居中等...
What do you think? 你怎么看?
How to improve that? 如何改善呢?
Load the style from react-bootstrap, like below: 从react-bootstrap加载样式,如下所示:
https://react-bootstrap.github.io/getting-started/introduction/ https://react-bootstrap.github.io/getting-started/introduction/
You are missing the stylesheet from react-bootstrap which is why the model is not getting styled properly. 您从react-bootstrap中丢失了样式表,这就是为什么模型无法正确设置样式的原因。 Add following to your html and it should work.
将以下内容添加到您的html中,它应该可以工作。
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
Please go through the link to integrate your app and use with react-bootstrap. 请通过链接来集成您的应用程序并与react-bootstrap一起使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.