標題中的圖標與流星react-bootstrap和react-router

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} 

出口默認MainLayout;

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>;