Ausrichtung mit React-Bootstrap

Question

Ich bin relativ neu zu React-Bootstrap (und Front-End-Arbeit im Allgemeinen). Was ist die beste Vorgehensweise zum Ausrichten von Elementen bei der Verwendung von React-Bootstrap?

Zum Beispiel:

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

Wie ausrichten ich die Button-Komponente fein säuberlich in die Eingabekomponente? Standardmäßig ist der Button nach oben ausgerichtet.

Neben dieses spezielle Problem zu lösen Ich interessiere mich für Zeiger auf Best Practices auf Ausrichten mit React-Bootstrap.

Answer 1

Technisch sind Ihre beiden die Spalte perfekt nebeneinander ausgerichtet.

Da sich die Eingabe innerhalb der Formulargruppe befindet, erhält sie die zusätzliche Höhe im Vergleich zur Schaltfläche "Löschen".

Wenn Sie label="Filter" aus Ihrem Code entfernen, können Sie die richtige Ausrichtung sehen.

Die einzige Möglichkeit, die ich jetzt sehe, ist eine margin-top: 25px; auf die Schaltfläche geben.

Hier ist die Demo

Grundsätzlich, ich habe eine benutzerdefinierte Klasse auf den Button und in der CSS habe ich den Spielraum ich es auszurichten benötigt.