1

私が構築している小さなアプリケーションの場合、2 つのボタンが連続して必要です。アプリケーションはreactjs上に構築されているため、私はreact-bootstrapを使用しています。

デスクトップでは全体がうまく機能しますが、モバイル デバイスでは最後の 2 つのボタンが次のように相互に移動します。 ここに画像の説明を入力

この問題は、最後の 2 つの列にボタンが含まれている場合にのみ発生するようです。

最後の 2 つの列のコード: 

<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 に答える