Căn chỉnh với React-Bootstrap

Question

Tôi khá mới với React-Bootstrap (và công việc front-end nói chung). Thực hành tốt nhất để căn chỉnh các yếu tố khi sử dụng React-Bootstrap là gì?

Ví dụ:

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

Làm thế nào để sắp xếp các thành phần nút gọn gàng với thành phần Input? Theo mặc định, nút được căn chỉnh ở trên cùng.

Bên cạnh việc giải quyết các vấn đề cụ thể này Tôi quan tâm đến gợi ý về thực hành tốt nhất về sắp xếp với Phản ứng-Bootstrap.

Answer 1

Về mặt kỹ thuật, cả hai dấu hai chấm đều được căn chỉnh cạnh nhau một cách hoàn hảo.

Vì đầu vào nằm bên trong nhóm biểu mẫu, nó sẽ có chiều cao bổ sung so với nút "rõ ràng".

Nếu bạn xóa label="Filter" khỏi mã của mình, bạn có thể thấy căn chỉnh phù hợp.

Cách duy nhất tôi thấy bây giờ là cung cấp cho một margin-top: 25px; vào nút.

Đây là Demo

Về cơ bản, tôi đã đưa ra một lớp tùy chỉnh nút và trong css tôi thêm lề tôi cần phải sắp xếp nó.