React引导按钮

Question

对于我正在构建的小应用程序，我需要连续两个按钮。由于应用程序是基于reactjs构建的，因此我使用react-bootstrap。

整个事情在桌面上的伟大工程，但在移动设备上通过海誓山盟最后两个按钮的举动是这样的：

这个问题似乎只在最后两列包含按钮出现。最后两个colums

代码：

<Reactbootstrap.Row> 
    // Other elements have been ommitted. 
    <ReactBootstrap.Col xs={1} className="no-padding text-center"> 
     <SyncButton updatePins={this.updatePins} syncing={this.state.syncing} synced={this.state.synced}/> 
    </ReactBootstrap.Col> 

    <ReactBootstrap.Col xs={1} className="no-padding"> 
     <SyncStatus synced={this.state.synced}/> 
    </ReactBootstrap.Col> 
</ReactBootstrap.Row> 

代码的按钮：

export var SyncStatus = React.createClass({ 
render() { 
    return (
     <ReactBootstrap.Button bsStyle={this.props.synced && "success" || "danger"} disabled> 
      <b className={this.props.synced && "fa fa-check" || "fa fa-times"}></b> 
     </ReactBootstrap.Button> 
    ); 
} 
}); 

export var SyncButton = React.createClass({ 
onClick() { 
    this.props.updatePins(); 
}, 

render() { 
    return (
     <ReactBootstrap.Button bsStyle="info" onClick={this.onClick}  disabled={this.props.synced || this.props.syncing}> 
      <b className={this.props.syncing && "fa fa-refresh fa-   spin" || "fa fa-exchange fa-rotate-90"}></b> SYNC 
     </ReactBootstrap.Button> 
    ) 
}, 
}); 

有谁知道如何解决这一问题？

Answer 1

将按钮放入的列没有足够的空间在移动设备上显示它们。这是一个xs = {1}，在768px的移动设备上只有34px宽。你应该重新考虑你的设计，使用引导程序的responsive grid functionality更具响应性。