昨天我的应用程序一切都运行良好,直到今天。我有一个带有 Bootstrap 的 React 应用程序。今天我刷新了我的应用程序,所有带有 Bootstrap 的 CSS 都停止工作了。
在我的package.json中是“react-bootstrap”:“^0.31.5”,我还在index.html中添加了一个指向脚本的链接,如下所示:
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
例如,我添加了以下代码:
import { Navbar , Nav , Button , NavItem } from "react-bootstrap";
import './../css/styles.css';
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#">React-Bootstrap</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link 1</NavItem>
<NavItem eventKey={2} href="#">Link 2</NavItem>
</Nav>
<Navbar.Form pullLeft>
{' '}
<Button type="submit">Submit</Button>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
在我的应用程序中看起来像这样:
GLyphicon 也不能像这样工作:
<Glyphicon glyph="align-left" />
当我点击导航栏中的这个小按钮时,菜单仅显示 1 秒并将其放下。
你有什么解决办法来解决这个问题吗?
最佳答案
如果您正在加载:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
这意味着您正在加载 Bootstrap 4.0.0,因为这是最新的。
而且因为 Bootstrap 4 与 Bootstrap 3 完全不兼容,这会破坏您的布局。
解决方案:
加载 Bootstrap 3 的 css(以及相应的 js)文件或迁移到 Bootstrap 4。
但是,迁移到 Bootstrap 4 需要您手动调整 Bootstrap 4 的所有内容,这可能需要相当长的时间,具体取决于应用程序中的内容量。
如果您只想修复 Bootstrap 4 的导航栏,如果您将其作为单独的问题发布,我可以帮助您做到这一点。
关于twitter-bootstrap - Bootstrap 停止与 React 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48617286/