带有流星反应引导和反应路由器的标题中的图标

Question

如何使用引导流星反应调整标题徽标的大小以适应？我无法让specific CSS styling 工作。

带有导航标题的MainLayout.js目前看起来像：

import React from 'react';
import { Route, RouteHandler, Link } from 'react-router';
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

const MainLayout = ({children}) =>
  <div className='main-layout'>
    <header>
      <Nav bsStyle="pills" activeKey="1">
        <LinkContainer to="/">
          <NavItem eventKey={1}>
            <img src="logo.png" alt="logo"></img>
          </NavItem>
        </LinkContainer>
        <LinkContainer to="/Library">
          <NavItem eventKey={2}>Library</NavItem>
        </LinkContainer>
      </Nav>
    </header>
    {children}

导出默认主布局；

Answer 1

试试

<Image responsive src="/logo.png" alt="logo" /> 而不是<img src="logo.png" alt="logo"></img>

或将className='img-responsive' 添加到<img> 元素

=== 编辑 ===

如果您希望导航具有响应性并将品牌图标保留在外部，则需要将其移到导航组件之外。这就是我所拥有的

<Navbar fluid={true}>
  <Navbar.Header>
    <Navbar.Brand>
      <Link to="/"><Image responsive src="/logo.png" alt="logo" /></Link>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav> Element Would Go in here
  </Navbar.Collapse>
</Navbar>;