我的文字显示在Bootstrap导航栏下方

如何解决我的文字显示在Bootstrap导航栏下方

我正在使用React并使用多个页面启动一个简单的登陆站点。我只是能够弄清楚如何路由到其他页面，所以现在我试图从主页开始，但是当我完成测试文本时，它看起来像是在导航栏下乞求，无法弄清楚如何从导航栏下方开始。

import React,{Component} from 'react';

    class Home extends Component {
        render(){
            return (
                <div>
                    <div>
                        <section>
                    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
                       </section>
                  </div>
              </div>
           );
         }
      }

export default Home;

导航：

import React,{ Component } from 'react';
import { browserRouter as Router,Switch,Route,Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

class Nav extends Component {
    render(){
        return (
            <Router>
                <div>
                    <nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
                        <a class="navbar-brand" href="#">Movie Garden</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                            <div class="navbar-nav ml-auto">
                                <Link to={'/'} class="nav-link active">
                                Home
                                </Link>
                                <Link to={'/about'} class="nav-link">
                                About
                                </Link>
                                <Link to={'/contact'} class="nav-link">
                                Contact
                                </Link>
                            </div>
                        </div>
                    </nav>
                    <Switch>
                        <Route exact path='/' component={Home} />
                        <Route path='/contact' component={Contact} />
                        <Route path='/about' component={About} />
                    </Switch>
                </div>
            </Router>
        )
    }
}

export default Nav;

我现在仅在使用Bootstrap。

解决方法

好的，麻烦是您的fixed-top上的navbar类名解决了，固定位置使元素从DOM流中分离出来。因此发生了什么，在navbar与DOM结构中的常规流分离的那一刻，<section>被推上了，因为navbar不再受div的常规流影响包含它。

所以我建议您执行以下操作：

<div className="route-outlet">
  <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/contact' component={Contact} />
      <Route path='/about' component={About} />
  </Switch>
</div>

用<Switch>包裹<div>，将其用作所有路线出口的容器。这是该<div>的样式：

.route-outlet {
  padding-top: headerHeight; // Type your header height here
}

在这里，我们正在应用padding-top，以便将内容推送到navbar下显示。您也可以使用margin-top，我更喜欢padding-top，我以前有margin-top的行为很奇怪。

结论：

通过添加包装器<div>，您不必为每个页面设置padding-top的样式。您只需执行一次，所有基于Switch呈现的页面将自动正确定位其内容。