如何解决固定反应导航栏
我正在将 Materialise UI 与 React 一起使用,并且我试图使顶部的导航栏固定,但是,我在导航栏的左侧有一个很大的间隙,将整个导航栏本身推到了右侧(请参阅照片)。
我怎样才能让前面的那个空隙消失?抱歉,如果这是一个愚蠢的问题,但这是我第一次尝试使用 React 构建实际的 Web 应用程序。
谢谢。
// App.js
import React from 'react';
import { browserRouter,Route } from 'react-router-dom';
import Header from './Header';
const App = () => {
return (
<browserRouter>
<Route path="/"/>
<Header />
</browserRouter>
)
};
export default App;
// Header.js
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return (
<div className='container'>
<div className="navbar-fixed">
<nav className="teal">
<div className="nav-wrapper">
<Link to="#home" className="brand-logo">Travelville</Link>
<Link to="#" data-activates="mobile-nav" className="button-collapse">
<i className="material-icons">menu</i>
</Link>
<ul className="right hide-on-med-and-down">
<li>
<Link to="#home">Home</Link>
</li>
<li>
<Link to="#search">Search</Link>
</li>
<li>
<Link to="#popular">Popular Places</Link>
</li>
<li>
<Link to="#gallery">gallery</Link>
</li>
<li>
<Link to="#contact">Contact</Link>
</li>
</ul>
</div>
</nav>
</div>
<ul className="side-nav" id="mobile-nav">
<li>
<Link to="#home">Home</Link>
</li>
<li>
<Link to="#search">Search</Link>
</li>
<li>
<Link to="#popular">Popular Places</Link>
</li>
<li>
<Link to="#gallery">gallery</Link>
</li>
<li>
<Link to="#contact">Contact</Link>
</li>
</ul>
</div>
);
};
export default Header;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。