Hướng dẫn how to align label and input in bootstrap 5 - cách căn chỉnh nhãn và đầu vào trong bootstrap 5

Tôi muốn biết nếu có thể định vị nhãn và đầu vào trên cùng một dòng, xin vui lòng. Tôi không biết làm thế nào để làm điều này trong bootstrap 5.

Cảm ơn rất nhiều về sự trợ giúp của bạn.



  
    HTML CSS JS
    
  
  
    
      
        
          User
          
          We'll never share your email with anyone else.
        
        
          Password
          
        
        Connection

Đã hỏi ngày 22 tháng 11 năm 2021 lúc 9:20Nov 22, 2021 at 9:20



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

Đã trả lời ngày 22 tháng 11 năm 2021 lúc 10:02Nov 22, 2021 at 10:02

Các hình thức

Mỗi nhóm các trường biểu mẫu nên nằm trong phần tử



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

2. Bootstrap không cung cấp kiểu dáng mặc định cho phần tử



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

2, nhưng có một số tính năng trình duyệt mạnh mẽ được cung cấp theo mặc định.

Mới cho các hình thức trình duyệt? Xem xét xem xét các tài liệu biểu mẫu MDN cho một cái nhìn tổng quan và danh sách đầy đủ các thuộc tính có sẵn.



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

4S trong khoảng thời gian



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

2 mặc định là



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

6, vì vậy hãy cố gắng để được cụ thể và luôn bao gồm



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

Bạn có thể vô hiệu hóa mọi phần tử biểu mẫu trong một biểu mẫu với thuộc tính



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

8 trên



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

Vì Bootstrap áp dụng


  Example label
  


  Another label

0 và


  Example label
  


  Another label

1 cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, các biểu mẫu sẽ mặc định ngăn xếp theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi dạng.

Tiện ích

Tiện ích ký quỹ là cách dễ nhất để thêm một số cấu trúc vào các hình thức. Họ cung cấp nhóm cơ bản của các nhãn, điều khiển, văn bản biểu mẫu tùy chọn và nhắn tin xác thực biểu mẫu. Chúng tôi khuyên bạn nên gắn bó với các tiện ích


  Example label
  


  Another label

2 và sử dụng một hướng duy nhất trong toàn bộ biểu mẫu để thống nhất.

Hãy thoải mái xây dựng các biểu mẫu của bạn theo cách bạn thích, với


  Example label
  


  Another label


  Example label
  


  Another label

4 hoặc gần như bất kỳ yếu tố nào khác.

Nhãn ví dụ

Nhãn khác


  Example label
  


  Another label

Hình thức lưới

Các hình thức phức tạp hơn có thể được xây dựng bằng các lớp lưới của chúng tôi. Sử dụng chúng cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau và các tùy chọn căn chỉnh bổ sung. Yêu cầu biến SASS


  Example label
  


  Another label

5 phải được bật [theo mặc định].Requires the
Example label Another label
5 Sass variable to be enabled [on by default].

Máng xối

Bằng cách thêm các lớp sửa đổi máng xối, bạn có thể có kiểm soát chiều rộng máng xối cũng như hướng nội tuyến theo hướng khối. Cũng yêu cầu biến SASS


  Example label
  


  Another label

5 phải được bật [theo mặc định].Also requires the
Example label Another label
5 Sass variable to be enabled [on by default].

Các bố cục phức tạp hơn cũng có thể được tạo ra với hệ thống lưới.


  
    Email
    
  
  
    Password
    
  
  
    Address
    
  
  
    Address 2
    
  
  
    City
    
  
  
    State
    
      Choose...
      ...
    
  
  
    Zip
    
  
  
    
      
      
        Check me out
      
    
  
  
    Sign in

Hình thức ngang

Tạo các biểu mẫu ngang với lưới bằng cách thêm lớp


  Example label
  


  Another label

7 vào các nhóm hình thành và sử dụng các lớp


  Example label
  


  Another label

8 để chỉ định độ rộng của nhãn và điều khiển của bạn. Hãy chắc chắn thêm


  Example label
  


  Another label

9 vào

0 của bạn để họ tập trung theo chiều dọc với các điều khiển hình thức liên quan của chúng.

Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo ra sự liên kết hoàn hảo mà bạn cần. Ví dụ, chúng tôi đã xóa

1 trên nhãn đầu vào radio xếp chồng lên nhau để sắp xếp tốt hơn đường cơ sở văn bản.


  
    Email
    
      
    
  
  
    Password
    
      
    
  
  
    Radios
    
      
        
        
          First radio
        
      
      
        
        
          Second radio
        
      
      
        
        
          Third disabled radio
        
      
    
  
  
    
      
        
        
          Example checkbox
        
      
    
  
  Sign in

Kích thước nhãn nằm ngang

Hãy chắc chắn sử dụng

2 hoặc

3 cho

0 hoặc

5 của bạn để làm theo chính xác kích thước của

6 và


  Email
  
    
  


  Email
  
    
  


  Email

Kích thước cột

Như được hiển thị trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số lượng

8 nào trong một


  Example label
  


  Another label

7. Họ sẽ phân chia chiều rộng có sẵn như nhau giữa họ. Bạn cũng có thể chọn một tập hợp con của các cột của mình để chiếm ít nhiều không gian, trong khi các ____38 còn lại chia đều phần còn lại, với các lớp cột cụ thể như

Auto-sizing

Ví dụ dưới đây sử dụng tiện ích Flexbox để tập trung theo chiều dọc và thay đổi

8 thành

3 để các cột của bạn chỉ chiếm nhiều không gian khi cần. Đặt một cách khác, các kích thước cột dựa trên nội dung.


  
    Name
    
  
  
    Username
    
      @
      
    
  
  
    Preference
    
      Choose...
      One
      Two
      Three
    
  
  
    
      
      
        Remember me
      
    
  
  
    Submit

Sau đó, bạn có thể phối lại một lần nữa với các lớp cột cụ thể kích thước.



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

Hình thức nội tuyến

Sử dụng các lớp

4 để tạo bố cục ngang đáp ứng. Bằng cách thêm các lớp sửa đổi máng xối, chúng tôi sẽ có máng xối theo hướng ngang và dọc. Trên các chế độ xem di động hẹp,

5 giúp xếp các điều khiển biểu mẫu và hơn thế nữa.

6 phù hợp với các yếu tố hình thức ở giữa, làm cho

7 phù hợp đúng.



  
    HTML CSS JS
    
  
  
    
      
      
      
          User
          
          
        
        We'll never share your email with anyone else.
      
        
        
             
        
          Password
          
        
        
        
        Connection

Các hình thức

Tiện ích

Hình thức lưới

Máng xối

Hình thức ngang

Kích thước nhãn nằm ngang

Kích thước cột

Auto-sizing

Hình thức nội tuyến

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề