Question

我正在使用reactJS，nodeJS和react-bootstrap构建一个新项目。设置我的目标网页时。无论我怎么尝试，页面右侧的页边空白都不会消失。

。我尝试将meyer的重置CSS文件包含在index.html中。我尝试将Body元素的边距，边框和填充设置为零。我尝试将我的容器设置为宽度：100％。我尝试调整背景图片的大小。我已经尝试将bootstrap 4 CDN包含在index.html中。

App.js

   import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import LandingPage from './components/landingpage';
import Header from './components/header';
import Footer from './components/footer';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>

          <Header/>
          <Switch>
            <Route exact path='/' component={LandingPage}/>
          </Switch>
          <Footer/>

      </Router>
    );
  }
}

export default App;

App.css

/* {
  box-sizing: border-box;
}*/

body {
  background-image: url('./images/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  /*background-size: cover;*/
  font-family: 'Courgette', cursive;
  color: beige;
  font-size: 28px;
  text-align: center;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 100%;
}

.courgette {
  font-family: 'Courgette', cursive;
}

.lobster {
  font-family: 'Lobster', cursive;
}

header.js

import React from "react";
import './header.css';
import { Container, Row, Col } from 'react-bootstrap';
import { Link } from "react-router-dom";


const Header = () => {
    return(
      <Container className='header'>
        <Row>
          <Col>
            <Link href="#">
              <img className='hamburgermenu' src={require('./../../images/navbaricon.png')} alt='Hamburger Menu Icon'/>
            </Link>
          </Col>

          <Col>
            <h1>MDNight</h1>
          </Col>

          <Col>
            <p>Hello!</p>
          </Col>
        </Row>
      </Container>
    )
}


export default Header;

header.css

.header{
    background-color: maroon;
    margin: 0;
}

.hamburgermenu {
    height: 80px;
    width: auto;
}

标题应该扩展到页面的边缘，但不会。

Answer 1

应用程序中有任何空白。

页面右边距的空白不会消失

1 个答案: