我希望正确获得页脚,但我无法得到结果,>]
这是我期望的:
下面是我所拥有的:
版权文本丢失在右侧的某个位置。您看不到背景为白色。
这里是代码:
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行。谢谢
我正在尝试适当地获得页脚,但无法获得结果,我希望这里是我希望拥有的东西:以下是我所拥有的:版权文本丢失在右侧的某个位置。您看不到它是...
使用flexbox将这些引导程序类d-flex flex-column justify-content-center align-items-center
添加到容器div中。
版权文本丢失在右侧的某个位置。你看不到 背景为白色