路线对页脚不起作用

问题描述 投票:0回答:2

我希望正确获得页脚,但我无法得到结果,>]

这是我期望的:

enter image description here

下面是我所拥有的:

enter image description here

版权文本丢失在右侧的某个位置。您看不到背景为白色。

这里是代码:

import React, {}  from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';

import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';

import SiteLogo from '../assets/images/village-logo.svg';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '@fortawesome/free-brands-svg-icons'

import './Footer.css';
class Footer extends React.Component {

    constructor(props, context) {
        super(props);
        this.state = {showLogin: false};
    }

    render() {
        return (
            <div>
                <div className="container">
                    <Navbar className="navbar" width="100" expand="lg">
                        <div className="footer-menu">
                            <div>
                                <Navbar.Brand href="/">
                                    <img
                                        src= { SiteLogo }
                                        className="logo"
                                        alt="Village"
                                    />
                                </Navbar.Brand>
                            </div>
                            <div className="subscribe">
                                <InputGroup className="subscribe-form">
                                    <Form.Control
                                    type="email"
                                    placeholder={TextContents.EmailSubscribe}
                                    className="subscribe-form-control"
                                />
                                </InputGroup>       
                            </div>
                            <div className="follow-container">
                                <WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
                                <p className="follow-text"> {TextContents.Follow} </p>
                                <FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
                                <FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
                                <FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
                                <FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
                            </div>
                        </div>
                    </Navbar>
                </div>
                <div>
                    <p className="copyright-text">{TextContents.Copyright}</p>
                </div>
            </div>);
        }
}

export default Footer;

和css


.navbar{
    background-color: white;
    width: 80%;
    margin-top: 2%;
    margin-bottom: 2%;
    font-family: "Fredoka One";
    font-size: 18px;
    margin: auto;
}

.logo {
    width: 214px;
    height: 28px;
    margin-right: 24;/*theme.spacing(3)*/
}
.container{
    display: flex;
    box-shadow: none;
    background-color: #ffffff;
    /*margin-top: 24; /*theme.spacing(3),*/
    position: absolute;
    bottom: 0;
    width: 80%;
    height: 2.5rem;
}

.footer-menu {
    display: flex;
    position: relative;
}

.subscribe {
    display: flex;
    position: relative;
    border-radius: 21px;
    background-color: #f4f7f8;
    margin-right: 16; /*theme.spacing(2),*/
    margin-left: 24; /*theme.spacing(3),*/
    width: 467px;
    height: 40px;
}

.follow-container {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: 16px;/*theme.spacing(2),*/
    min-width: 300px;
}

.follow-text {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #ff7255;
    font-family: Source Sans Pro;
    min-width: 75px;
    margin-left: 20px;
    margin-right: 5px;
}

.follow-icon {
    width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-left: 2px;
    color: #ff7255;
}

.copyright-text {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #ffff7255;
    font-family: Source Sans Pro;
}

.subscribe-form {
    width: 470px;
    height: 40px;
    border-radius: 20px;
    margin-left: 60px;
}

.subscribe-form-control {
    font-family: Source Sans Pro;
    text-align: left;
    color: #cdcece;
    background-color: #f4f7f8;
    border-style: none;
}

任何想法,如何正确地将所有内容居中并确保我有2行。谢谢

我正在尝试适当地获得页脚,但无法获得结果,我希望这里是我希望拥有的东西:以下是我所拥有的:版权文本丢失在右侧的某个位置。您看不到它是...

javascript css reactjs react-bootstrap
2个回答
0
投票

使用flexbox将这些引导程序类d-flex flex-column justify-content-center align-items-center添加到容器div中。


1
投票

版权文本丢失在右侧的某个位置。你看不到 背景为白色

© www.soinside.com 2019 - 2024. All rights reserved.