1

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

整个事情在桌面上运行良好，但在移动设备上，最后两个按钮像这样相互移动： 在此处输入图像描述

只有当最后两列包含按钮时，才会出现此问题。

最后两列的代码： 

<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>
    )
},
});

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

4

1 回答 1

1

您放置按钮的列没有足够的空间在移动设备上显示它们。这是一个 xs={1}，在 768px 的移动设备上只有 34px 宽。您应该重新考虑您的设计，以便使用引导程序的响应式网格功能更加灵敏。

于 2015-08-20T17:45:31.870 回答