React-Bootstrap ile hizalama

Question

React-Bootstrap için oldukça yeni (ve genel olarak ön uç çalışması). React-Bootstrap kullanırken öğeleri hizalamak için en iyi uygulama nedir? Örneğin

:

<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/

nasıl Girdi bileşenine düzgünce Düğme bileşenini örtüşüyor? Varsayılan olarak düğme en üste hizalanır. Ben Tepki-Bootstrap ile uyumlu hale getirme konularında en iyi uygulamalara işaretçiler ilgileniyorum bu özel sorunu çözme yanı sıra

.

Answer 1

Teknik olarak her iki diziniz de birbirinizin yanına mükemmel şekilde hizalanır.

Giriş form grubunun içinde olduğundan, "temizle" düğmesine kıyasla fazladan yükseklik alır.

label="Filter" kodunuzu kaldırırsanız, düzgün hizalamayı görebilirsiniz.

Şimdi görmemin tek yolu, düğmeye margin-top: 25px; vermektir. İşte

Ben düğmeye için özel bir sınıf verdi ve css içinde ben bunu uyum için yapılması gereken marjı eklenir Temelde Demo

olduğunu.