条件付きレンダリングとブートストラップで反応し、レイアウトを維持する

Question

私はReactとBootstrapを使ってプロジェクトを進めています。私は1つの大きな棒グラフと2つの小さな箱を持っていて、一緒に水平に座る必要があります。ここで

は、彼らが一緒に水平に（正しい道を）座って見にペンウィンドウを拡大...それが動作するはず方法は次のとおりです。

https://codesandbox.io/s/lO9rvrBYM

私は場合に、そこにいくつかの条件付きレンダリングロジックを必要とするしかしノーあり私は大きな棒グラフを表示したくありません。ここでそのチェックアウト：例では

https://codesandbox.io/s/ELLzLo3g

を条件それはもはや適切に要素を配置することはできませんレンダリングで。彼らはお互いの上に永久に座っています。

私はそれがライン69と関係があると思っています。横向きのレイアウトを維持するために、グラフをレンダリングする必要はありませんが、構文エラーが発生します。

誰でもブートストラップでこれを解決するためのヒントがありますか？すべての

Answer 1

まず、あなたの質問に私の答えはポイントを逃す可能性がありますので、&サンプルは、あなたが達成したいものを上の明確ではない:)

あなたは基本的にのためにconditionnalディスプレイと混合した2列のレイアウトをしたいです最初の列。

列の表示はブートストラップによって完全に処理されます（実際にはここで列が大きく混乱しています）。条件付きの表示はコンポーネントの状態で管理する必要があります。

まず、あなたのレイアウトは、そのような気にいらないようになります。

<div className='row'> 
    <div className='col-sm-7'> 
     <div> [your chart here] </div> 
    </div> 
    <div className='col-sm-5'> 
     <div> [your first block here] </div> 
     <div> [your second block here] </div> 
    </div> 
</div> 

その後、あなたはチャートが表示されるべきかどうかを決定するコンポーネントの状態内部ブール値を必要としています。これはinsuffisantある場合は、this.state.showChartに

<div className='row'> 
    {this.state.showChart ? 
     <div className='col-sm-7'> 
      <div> [your chart here] </div> 
     </div> 
    : '' } 
    <div className='col-sm-5'> 
     <div> [your first block here] </div> 
     <div> [your second block here] </div> 
    </div> 
</div> 

この情報を保存すると仮定しましょ、あなたの説明ビットを改善しようと、私は直接あなたのサンドボックスサンプル上で動作することができます:)

を