Dotnet核心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>，我就知道了

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

Answer 1

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

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