與React-Bootstrap對齊

Question

我對React-Bootstrap（以及一般前端工作）相當陌生。使用React-Bootstrap時對齊元素的最佳做法是什麼？

例如：

<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

從技術上講，您的兩個col完全對齊。

由於輸入位於表單組內，與「清除」按鈕相比，它獲得了額外的高度。

如果您從代碼中刪除label="Filter"，則可以看到正確的對齊方式。

我現在看到的唯一方法是給按鈕一個margin-top: 25px;。

這裏是Demo

基本上，我給了一個自定義類的按鈕，並在CSS我說我需要對齊邊緣。