时间戳

首页 > 解决方案 > ReactJS 和 CSS 渲染

css - ReactJS 和 CSS 渲染

问题描述

所以我正在使用 React 设计一个 Web 应用程序，但我被困在这个问题上。下面给出的是正在呈现的内容在此处输入图像描述

正如我使用红色矩形突出显示的那样，我的页脚组件中有一个截断区域。我不确定是什么原因造成的。CSS 和组件代码如下所示

import styled from 'styled-components';

export const Background = styled.section`
    background: black`;

export const Column = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 50px; 
    margin-top: 50px;`;

export const Row = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: center;`;

export const Text = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

页脚组件

import React from 'react';
import { Column, Row, Background, Text } from './FooterStyles';

function Footer(props) {
    return (
        <div>
            <Background>
                <Row>
                    <Column>
                        <Text><h1>Developed By</h1></Text>
                        <h3>Erwin Smith</h3>
                        <h3>Peter Jackson</h3>
                        <h3>Tommy</h3>
                    </Column>
                    <Column>
                        <h1>About US</h1>
                    </Column>
                </Row>
            </Background>
        </div>
    )
}

export default Footer;

非常感谢解决此问题的解决方案。

标签： cssreactjs

解决方案

如果您使用引导程序，请尝试使用 margin-left,right -15px n overflow-x: hidden to body 创建一个自定义类

推荐阅读