如何解决如何修复我的页脚?我正在用 Grommet 做这件事,一切看起来都不错,但所有的页脚内容都移到了左边
无论如何,我的页脚都保持在左侧。我使用了所有的 align 语句,justify 语句,但没有任何效果。我尝试使用间隙或边距将其隔开以使其位于中心,但这导致了响应问题。谁能帮助我或知道我能做什么?
这是我的js代码:
`import React from 'react'; 从“样式组件”导入样式; 从 'react-router-dom' 导入 {Link};
import { Grommet as GrommetIcon } from 'grommet-icons';
import { Anchor,Box,Footer,grommet,Grommet,Main,Text,Heading,} from 'grommet';
import "./Footer.css";
const StyledAnchor = styled(Anchor)`
font-weight: 200;
`;
const FooterAnchor = ({ ...rest }) => (
<StyledAnchor href="/" color="white" {...rest} />
);
const FooterContent = () =>
<Box gap="" >
<Box direction="row" align="center" gap="large" className="dropdown-content1" >
<FooterAnchor href="/" className="FooterText"className="dropdown-Content"><Text size="xlarge" className="dropdown-Content">Home</Text></FooterAnchor>
<Box direction="column" gap="small" >
<FooterAnchor textAlign="center" href="/aboutus" className="FooterText"><Text size="xlarge" >About Us</Text></FooterAnchor>
<Box alignSelf="center">
<FooterAnchor href="/joinus" className="FooterText"><Text size="xlarge" >Join Us</Text></FooterAnchor>
</Box>
</Box>
<FooterAnchor href="/events" className="FooterText"><Text size="xlarge" >Events</Text></FooterAnchor>
<Box direction="column">
<FooterAnchor href="/scholarships" alignSelf="center" className="FooterText"><Text size="xlarge">Scholarships</Text></FooterAnchor>
<Box>
<FooterAnchor href="/technicalscholarshipapp" alignSelf="center" className="FooterText"><Text size="xlarge" >Technical/Vocational Scholarship Application</Text></FooterAnchor>
</Box>
<Box>
<FooterAnchor href="/universityscholarshipapp" alignSelf="center" className="FooterText"><Text size="xlarge" >Keith Skinner Memorial Scholarship Application</Text></FooterAnchor>
</Box>
</Box>
<FooterAnchor href="/makeadonation" ><Text size="xlarge" >Make A Donation</Text></FooterAnchor>
<FooterAnchor href="/contactus" ><Text size="xlarge" >Contact Us</Text></FooterAnchor>
<FooterAnchor href="/login" ><Text size="xlarge" >Log In</Text></FooterAnchor>
</Box>
</Box>
export const MainFooter = () => (
<Grommet theme={grommet}>
<Box flex />
<Box className="mainfooter" alignSelf="center">
<Footer background="dark-1" pad="large" >
<FooterContent />
</Footer>
<Footer
background="dark-2"
pad={{ horizontal: 'large',vertical: 'small' }}
>
<Box direction="row" gap="small">
<Box >
<GrommetIcon color="#418ccd " />
</Box>
<Text alignSelf="center">SEEF</Text>
</Box>
<Text textAlign="center" size="small">
© 2021 Copyright
</Text>
</Footer>
</Box>
</Grommet>
);
MainFooter.storyName = 'MainFooter';
export default {
title: 'MainFooter',};
`
这是我的css:
`.mainfooter{
width:100%;
left:0;
position: absolute;
text-decoration: none;
}
@media (max-width: 920px){
.mainfooter {
width: 100%;
margin: 0;
text-align: center;
line-height: 50px;
}
}
@media (max-width: 500px){
footer .footertext{
position: fixed;
top: 0;
left: -100%;
background: #555;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
z-index: 99;
transition: 0.5s linear;
}
footer .footertext.toggle{
left: 0;
}
.mainfooter .footertext{
line-height: normal;
}
.footertext{
font-size: 1.4rem;
}
}`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。