[英]Navbar component not displaying react-bootstrap CSS
我正在渲染一個 react-bootstrap 導航欄,但我只是得到了沒有任何引導樣式的混亂文本。
我有引導 CDN 標簽。 我已經使用 npm 為項目安裝了 react-bootstrap。 我還確保不使用 Bootstrap 4 標簽,因為 home 已經說過這不適用於 react-bootstrap 我按照此處的說明將以下幾行添加到 index.htmlhttps://react-bootstrap.github.io/getting -開始/介紹/ 。
<script src="https://unpkg.com/react/umd/react.production.js" crossorigin />
<script
src="https://unpkg.com/react-dom/umd/react-dom.production.js"
crossorigin
/>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
我還嘗試了所有可以找到的針對此問題的已發布解決方案。 我不確定我在這里做錯了什么......
Index.html(顯然只有腳本標簽)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react/umd/react.production.js" crossorigin />
<script
src="https://unpkg.com/react-dom/umd/react-dom.production.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
></script>
<script>var Alert = ReactBootstrap.Alert;</script>
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
應用程序.js
import React from 'react';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavDropdown from 'react-bootstrap/NavDropdown'
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>;
</div>
);
}
export default App;
您在index.html
文件中使用了錯誤的引導程序版本 (3.3.7)。 您需要使用(4.3.1):
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.