React-Bootstrap Navbar.Collapse with Meteor 1.3 and Mantra



我在Meteor应用程序中创建了以下导航组件,从Mantra示例博客应用程序中进行了修改:

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或铬上模拟的Nexus 5X),导航栏不会崩溃,我使用的是带有React Bootstrap 0.28.4的Meteor最新版本(1.3),我还使用sb-admin-2主题中的less和css文件,这些文件在手机上正常崩溃,有没有什么原因可以解释为什么这不适用于这个场景?

找到答案,我掩饰了我没有元标签:

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

此外,由于Mantra鼓励使用JS进行模板化,我使用Kadira:metreodochead添加了meta标签,我在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

最新更新