React-Bootstrap Navbar.Collapse с Meteor 1.3 и 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 на хроме), панель навигации не рухнет, я использую последнюю версию Meteor версии (1.3) с React-Bootstrap 0.28.4, я также использую файлы less и css из тема sb-admin-2, которая нормально сворачивается на мобильных устройствах, есть ли какая-либо причина, по которой это не работает конкретно с этим сценарием?


reactjs responsive-design twitter-bootstrap meteor react-bootstrap
person Marcelo Risoli    schedule 30.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нашел ответ, я не заметил, что у меня не было метатега:

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

Кроме того, поскольку Mantra рекомендует использовать JS для создания шаблонов, я использовал Kadira:meteor-dochead, чтобы добавить метаданные. теги, я создал файл meta.js внутри client/configs со следующим кодом:

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

person Marcelo Risoli    schedule 04.04.2016