小编sha*_*101的帖子

在 React & Bootstrap 4 中使用媒体查询时的未知属性名称

我似乎无法使用 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;

Run Code Online (Sandbox Code Playgroud)

.my-custom-color {
	color: red;
	text-align: right;
	@media (max-width: 767.98px) {
		color: blue;
		text-align: center;
	}
}

Run Code Online (Sandbox Code Playgroud)

<!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" /> …

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap reactjs

sha*_*101

lucky-day

3
推荐指数

1
解决办法

2540
查看次数