Question

我在使用超大型加速器（来自reactstrap）创建基本的React应用时遇到问题。我可以加载Jumbotron，尽管图像不会在容器中固定。另外，一旦加载了图像，即使它们位于渲染的不同部分中，所有文本叠加在图像上也是如此。我不确定我在这里缺少什么。这是我所拥有的：

App.js：

import React, { Component } from 'react';
import './App.css';
import Components, { Navbar, Jumbotron, Textbox, ProPersonal, Footer } from "./Components/AllComponents"
import { Container, Row, Col } from 'reactstrap';


class App extends Component {
  render() {
    return (
      <div className="App">
        <div className = {Container}>

          <div className = {Row}>
            <header className="App-header">
              <Navbar />
            </header>
          </div>
        
          <div className = {Row}>
            <body className= "App-body">
              <Jumbotron />

            </body>
          </div>

          <div className = {Row}>
            <footer className = "App-footer">
              <Footer />
            </footer> 
          </div>

        </div>
      </div>
    );
  }
}

export default App;

Jumbotron.js：

import React from 'react';
import { Jumbotron, Button, Container } from 'reactstrap';
import '../App.css'
import HomeImage from "../assets/bikeBackground.jpg"
// import LazyHero from 'react-lazy-hero';

const Example = (props) => {
    return (
        <Jumbotron fluid className = "jumbtron">
            <Container fluid>
                <img src = {HomeImage}></img>
            </Container>
        </Jumbotron>
    );
};

export default Example;

最后是CSS：

.App {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

.App-header {
  background-color: #282c34;
  min-height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.App-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(10px + 2vmin);
  text-align: center;
  color: gray;
  background-color: aquamarine;
}

.App-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(10px + 2vmin);
  text-align: center;
  color: aquamarine;
  width: 1080px;
  background-color: gray;
}

 .jumbotron {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  filter: blur(0px);
}

Reactstrap不包含在超大型飞行器中

0 个答案: