リアブートストラップとのアライメント

Question

私はReact-Bootstrap（およびフロントエンドの一般的な作業）でかなり新しいです。 React-Bootstrapを使用して要素を整列させるベストプラクティスは何ですか？例えば

：私は入力コンポーネントにきちんとButtonコンポーネントを揃えるにはどうすればよい

<Grid> 
    <Row className="show-grid"> 
     <Col md={10}> 
      <Input type="text" label="Filter"/> 
     </Col> 
     <Col md={2}> 
      <Button>Clear</Button> 
     </Col> 
     </Row> 
</Grid> 

https://jsfiddle.net/f9vdksnu/1/

？デフォルトでは、ボタンは上部に揃えられています。私が反応-ブートストラップで揃えるのベストプラクティスに関する指針に興味を持って、この特定の問題を解決する以外に

。

Answer 1

技術的には、両方の色が完全に隣り合っています。

入力はフォームグループ内にあるので、「クリア」ボタンと比較して余分な高さを得ます。

コードからlabel="Filter"を削除すると、適切な配置が確認できます。

ここに表示される唯一の方法は、margin-top: 25px;をボタンに付けることです。ここで

は基本的にDemo

ですが、私はボタンにカスタムクラスを与え、CSSで私はそれを揃えるために必要なマージンを追加しました。