Javascript 如何在分辨率更改时重置网格分页内容？

我使用了BootStrap中的一个网格模板，该网格的分页如所附的图1所示。现在，当我更改浏览器的屏幕分辨率时，页面内容会根据所附的图像2分成两行，而不是一行

但一旦我刷新页面，它就会正确地加载页面，如图3所示。但我希望在改变分辨率后立即获得这些内容

下面是JS的代码，它使用React处理该分页类 var ul=React.DOM.ul（{className:'pagination pagination sm'，role:'menubar'，'aria label:'globalizationFactory.translate（'STORMS_PAGER'），key:'PAGER_container'}，[firstLi，prevLi，this.getPages（currentPageIndex+1，totalPages），nextLi，lastLi]）

任何建议都会有帮助

图1： 图2：

图3：

---

我认为您所需要做的就是侦听窗口大小调整事件，并使其触发渲染。在React中，如果更改状态，组件将渲染。可以在进行渲染的组件内部执行类似的操作

getInitialState: function() {
  return {
    windowWidth: window.innerWidth,
    windowHeight: window.innerHeight
  };
},
componentDidMount: function() {
  return window.addEventListener('resize', this._handleResize);
},
componentWillUnmount: function() {
  return window.removeEventListener('resize', this._handleResize);
},
_handleResize: function() {
  if (this.state.windowWidth !== window.innerWidth || this.state.windowHeight !== window.innerHeight) {
    return this.setState({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    });
  }
}

getInitialState: function() {
  return {
    windowWidth: window.innerWidth,
    windowHeight: window.innerHeight
  };
},
componentDidMount: function() {
  return window.addEventListener('resize', this._handleResize);
},
componentWillUnmount: function() {
  return window.removeEventListener('resize', this._handleResize);
},
_handleResize: function() {
  if (this.state.windowWidth !== window.innerWidth || this.state.windowHeight !== window.innerHeight) {
    return this.setState({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    });
  }
}