.NET Core ReactRedux模板生成应用左侧菜单改顶部的技术问询

没问题，我已经帮好几个开发者改过这个模板的导航布局了，给你一步步把左侧菜单改成顶部响应式导航：

步骤1：重构NavMenu.js的组件结构 #

原来的模板代码是针对左侧侧边栏写的，我们需要调整成顶部导航的结构，替换你的NavMenu.js内容：

import React from 'react';
import { Link } from 'react-router-dom';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';

export default props => (
  <Navbar inverse fixedTop fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <Link to="/">ReactReduxApp</Link>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <LinkContainer exact to="/">
          <NavItem>
            <Glyphicon glyph="home" /> Home
          </NavItem>
        </LinkContainer>
        <LinkContainer to="/counter">
          <NavItem>
            <Glyphicon glyph="education" /> Counter
          </NavItem>
        </LinkContainer>
        <LinkContainer to="/fetchdata">
          <NavItem>
            <Glyphicon glyph="th-list" /> Fetch data
          </NavItem>
        </LinkContainer>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

核心改动点：

• 用collapseOnSelect属性实现移动端点击菜单后自动收起
• 移除了原侧边栏的fixedLeft定位，保留fixedTop让导航固定在顶部
• 把导航项放在Navbar.Collapse容器里，配合Navbar.Toggle实现响应式折叠（小屏幕会变成汉堡菜单）

步骤2：替换NavMenu.css的样式 #

原CSS是为侧边栏设计的，直接替换成顶部导航的样式：

.navbar {
  margin-bottom: 20px;
  border-radius: 0;
}

.navbar-brand {
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

.nav > li > a {
  padding: 15px 15px;
}

/* 适配小屏幕的折叠菜单样式 */
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
}

直接删掉原文件里所有侧边栏相关的样式（比如.sidebar、fixed-left的宽度、定位规则），用上面的代码代替。

步骤3：调整主内容的边距 #

原来的页面内容会有左侧padding来避开侧边栏，需要修改App.css（或者主页面的样式文件），去掉多余的左侧内边距：
找到类似这样的代码块：

.body-content {
  padding-left: 15px;
  padding-right: 15px;
  /* 删掉下面这行（如果存在的话） */
  /* padding-left: 250px; */
}

这样页面内容就不会被顶部导航遮挡，也不会留出多余的左侧空白。

做完这三步，你的导航就会从固定左侧的侧边栏，变成桌面端水平排列、移动端可折叠的顶部导航了。

内容的提问来源于stack exchange，提问作者dreamfly