React-Bootstrap Navbar.Collapse 与 Meteor 1.3 和 Mantra答案

【问题标题】：React-Bootstrap Navbar.Collapse with Meteor 1.3 and MantraReact-Bootstrap Navbar.Collapse 与 Meteor 1.3 和 Mantra
【发布时间】：2016-07-17 18:51:50
【问题描述】：

我在 Meteor 应用中创建了以下导航组件，修改自 Mantra sample blog app：

import React from 'react';
import { Nav, Navbar, NavItem } from 'react-bootstrap';

const Navigation = () => (
  <Navbar staticTop>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="/">Meteorball</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} href="/new-crew">New Crew</NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

export default Navigation;

它可以正常工作，如果我在笔记本电脑上调整浏览器的大小，它会正常折叠，但是当我在手机中打开它（物理 Moto X 2014 或在 chrome 上模拟 Nexus 5X）时，导航栏不会折叠，我是使用带有 React-Bootstrap 0.28.4 的 Meteor 最新版本（1.3），我还使用了 sb-admin-2 theme 中的 less 和 css 文件，它们在移动设备上正常崩溃，有什么理由为什么这不适用于这种情况吗？ ?

【问题讨论】：

标签： twitter-bootstrap meteor reactjs responsive-design react-bootstrap

【解决方案1】：

找到了答案，我掩饰了我没有元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

另外，由于 Mantra 鼓励使用 JS 进行模板，我使用 Kadira:meteor-dochead 添加元标记，我在 client/configs 中创建了一个 meta.js 文件，代码如下：

import {DocHead} from 'meteor/kadira:dochead';

export default function () {
let metaInfo = {name: 'viewport', content: 'width=device-width, initial-scale=1'};
  DocHead.addMeta(metaInfo);
}

并将其导入client/configs/context.js

【讨论】：