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更具響應性。