Question

app.js

import React from 'react';
import './App.css'
import 'bootstrap/dist/css/bootstrap.css';
function App(props) {
    return <h1>Hello, {props.name}</h1>;
}
export default App;

app.css

@media (min-width: 576px) {
    body {
        background-color: red;
    }
}

@media (min-width: 768px) {
    body {
        background-color: chartreuse;
    }
}

@media (min-width: 992px) {
    body {
        background-color: crimson;
    }
}

@media (min-width: 1200px) {
    body {
        background-color: aqua;
    }
}

index.html - ＆gt;见下文

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

谁能帮我找到解决这个问题的方法？我的情况并非如此。 Bootstrap在我的情况下工作（我为此添加了一个库）。也许我的package.json

中没有一些库

package.json

{
  "name": "react-web-app-bootstrap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0",
    "reactstrap": "^5.0.0-beta"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

希望它会有所帮助

Answer 1

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css'; <--- solving here 
import './App.css'
function App(props) {
    return <h1>Hello, {props.name}</h1>;
}
export default App;

Answer 2

无需导入

import 'bootstrap/dist/css/bootstrap.css';

如果您要添加html，就像在index.html中添加

一样

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

写在app.js

const App = () => <div class="demo">App Component</div>

写在app.css

.demo {
 background-color: red;
}
@media only screen and (max-width: 768px) {
 .demo {
    font-size: 60px;
 }
}

Bootstrap @media在我的案例中不起作用（React）

2 个答案: