asp.net-core-2.1 - 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>我得到了这个

注意切割“计数器”菜单的圆角矩形。这个矩形是窗口宽度的一部分。F12 显示它是添加到导航栏之前的“col-sm-3”类。任何人都知道它来自哪里以及如何改变它？

Answer 1

原来所有都在 src/components/layout.js 中。像下面这样的简单更改解决了问题：

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