0
我在嘗試構建模塊化反應應用程序，但導航欄出現問題，出於某種原因導航欄格式不正確。導航欄在Reactjs中顯示不正確
網頁： -
這裏是我完整的代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ReactStrap</title>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var Navbar = React.createClass({
render(){
return(
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand" href="#">ReactStrap</a>
</div>
<div id="navbar">
<ul className="nav navbar-nav">
<li className="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
);
}
});
var Jumbotron = React.createClass({
render(){
return(
<div>
<div className="jumbotron">
<div className="container">
<h1>Hello, world!</h1>
<p className="lead">This is a Bootstrap theme that uses React.js components</p>
<p><a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
);
}
});
var Page = React.createClass({
render(){
return(
<div>
<div className="container">
This is the home page
</div>
</div>
);
}
});
var Theme = React.createClass({
render(){
return(
<div>
<Navbar />
<Jumbotron />
<Page />
</div>
);
}
});
ReactDOM.render(
<div>
<Theme />
</div>,
document.getElementById('root'));
</script>
</body>
</html>
你有沒有檢查導航欄的CSS？ – Gokhan