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

带有meteor react-bootstrap和react-router的标题中的图标

1 个答案: