我想使用ReactJS创建一个Web应用程序。我让bootstrap
正常工作,但现在我希望CSS
能够正常工作。为什么我的方法在执行CSS
尝试做的事情时无效?
这是我的index.html
文件:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<script type="text/babel" src="index.js"></script>
</body>
</html>
这是我的index.css
文件:
#portfolio {
text-align: center;
}
这是我的index.js
文件:
var TitleBar = React.createClass({
render: function() {
return(
<div className="container">
<button id="portfolio" type="button" className="btn btn-primary">Portfolio</button>
<button type="button" className="btn btn-primary">About</button>
<button type="button" className="btn btn-primary">Contact</button>
</div>
);
}
});
ReactDOM.render(<TitleBar />, document.getElementById('firstBar'));
答案 0 :(得分:1)
您正在使用className两次。如果将投资组合类放在另一个className中,它将起作用。
var TitleBar = React.createClass({
render: function() {
return(
<div className="container">
<button type="button" className="btn btn-primary portfolio">Portfolio</button>
<button type="button" className="btn btn-primary">About</button>
<button type="button" className="btn btn-primary">Contact</button>
</div>
);
}
});
ReactDOM.render(<TitleBar />, document.getElementById('firstBar'));
答案 1 :(得分:0)
看起来是因为您的CSS引用了ID #portfolio
而不是类.portfolio
。名称前面的#
表示元素是ID,.
表示元素是类。