流星反応ブートストラップと反応ルータを持つヘッダのアイコン

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

あなたはNAVは応答動作し、維持したい場合は

=== === EDIT

<Image responsive src="/logo.png" alt="logo" />代わりの<img src="logo.png" alt="logo"></img>

または<img>要素

にclassName='img-responsive'を追加してみてくださいブランドアイコンが外にある場合は、ナビコンポーネントの外に移動する必要があります。ここで私は私が反応し、ルータが必要ですブートストラップと、使用してい

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