dotnet core reactredux模板菜单之谜

Question

我使用以下命令从新的 Dotnet 核心 reactredux 模板生成了一个应用程序：dotnet new reactredux

生成的应用程序的菜单在左侧。我想将其更改为顶部。这是 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={'/'}>TestCoreReactRedux</Link>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>

如果我注释掉 NavMenu.css 的导入，菜单现在位于顶部但与内容重叠。像这样

有什么方法可以在不更改每个内容页面的上边距的情况下将其向下移动？

如果我将 <Navbar inverse fixedTop fluid collapseOnSelect> 更改为 <Navbar default collapseOnSelect>，我得到了这个

注意切割 "Counter" 菜单的圆角矩形。此矩形与 window 的宽度成比例。 F12 显示它是添加到导航栏之前的 "col-sm-3" class。任何人都知道它来自哪里以及如何更改它？

Answer 1

结果都在 src/components/layout.js 中。如下所示的简单更改解决了问题：

export default props => (
  <Grid fluid>
    <Row>
      <Col  >
        <NavMenu />
            </Col>
        </Row>
        <Row>
      <Col >
        {props.children}
      </Col>
    </Row>
  </Grid>
);

dotnet core reactredux模板菜单之谜

Dotnet core reactredux template menu mystery

asp.net-core-2.1