在 React & Bootstrap 4 中使用媒体查询时的未知属性名称
sha*_*101 3 css twitter-bootstrap reactjs
我似乎无法使用 React.js 和 Bootstrap 4 进行任何媒体查询，但我在媒体查询之外键入的任何内容都可以使用。在 Chrome 检查器中，媒体查询中的任何内容都显示为“未知属性名称”。我在这里做错了什么？
我在 index.html 中包含了 bootstrap 4 CDN JS 依赖项。
import React from 'react';
import './App.css';
function App() {
return (
<div className='App'>
<div className='container'>
<h1 className='my-custom-color'>This is my app</h1>
</div>
</div>
);
}
export default App;.my-custom-color {
color: red;
text-align: right;
@media (max-width: 767.98px) {
color: blue;
text-align: center;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>小智 8
普通 css 不支持嵌套媒体查询。您提供的样式文件看起来像是scss尚未编译为的文件css，因此浏览器无法理解其语法。
手动将其转换为 css
@media (max-width: 767.98px) {
.my-custom-color {
color: blue;
text-align: center;
}
}
- 谢谢，解决了我的问题！我对 CSS 很陌生。 (3认同)
| 归档时间： |
|
| 查看次数： |
2540 次 |
| 最近记录： |