Bootstrap căn chỉnh nhãn và đầu vào ngang

Của cải

Tất cả các giá trị mặc định của thuộc tính đều có thể định cấu hình trên toàn cầu

Tài sản

(Click để sắp xếp tăng dần)

Loại

(Click để sắp xếp tăng dần)

Vỡ nợ

Sự miêu tả

content-cols
v2. 21. 0+______3 hoặc Number hoặc String Số lượng cột cho màn hình chiều rộng nội dung 'xs' trở lêncontent-cols-lg
v2. 21. 0+Boolean hoặc Number hoặc String Số cột cho màn hình có chiều rộng nội dung 'lg' trở lên

  
    Title of the document
    
  
  
    
      

        Name
        
      
      

        Your Age
        
      





Enter Your Country

0
v2. 21. 0+Boolean hoặc Number hoặc String Số cột cho màn hình có chiều rộng nội dung 'md' trở lênBoolean2
v2. 21. 0+Boolean hoặc Number hoặc String Số lượng cột cho màn hình có chiều rộng nội dung 'sm' trở lênBoolean6
v2. 21. 0+Boolean hoặc Number hoặc String Số lượng cột cho màn hình có chiều rộng nội dung 'xl' trở lênNumber0
_______5Text to place in the help text area of the form groupNumber2
BooleanNumber4Disabled the fieldset element, which in turn disables the form controls (on browsers that support disabled fieldsets). Has no effect if `label-for` is setNumber5
String Number7Giá trị sử dụng cho thuộc tính `aria-live` trên văn bản phản hồiNumber8 < . Không đặt giá trị nếu có nhiều hơn một điều khiển biểu mẫu trong nhómString0< . Không đặt giá trị nếu có nhiều hơn một điều khiển biểu mẫu trong nhómString0< . Không đặt giá trị nếu có nhiều hơn một điều khiển biểu mẫu trong nhómString0
StringUsed to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as neededString0
StringText to show when the form group has an invalid stateString2
StringText to place in the label/legend of the form groupString4
StringText alignment 'left', 'center', 'right' for the label 'xs' screens and upString6
StringText alignment 'left', 'center', 'right' for the label 'lg' screens and upString8
StringText alignment 'left', 'center', 'right' for the label 'md' screens and upcontent-cols-lg0
StringText alignment 'left', 'center', 'right' for the label 'sm' screens and upcontent-cols-lg2
StringText alignment 'left', 'center', 'right' for the label 'xl' screens and upcontent-cols-lg4
content-cols-lg5 or content-cols-lg6 or StringCSS class (or classes) to add to the label/legend elementcontent-cols-lg8
Boolean or Number or StringNumber of columns for the label width 'xs' screens and upBoolean2
Boolean or Number or StringNumber of columns for the label width 'lg' screens and upBoolean6
Boolean or Number or StringNumber of columns for the label width 'md' screens and upNumber0
Boolean or Number or StringNumber of columns for the label width 'sm' screens and upNumber4
Boolean or Number or StringNumber of columns for the label width 'xl' screens and upNumber8
StringSet to the ID of the singular form control in the form group. Do not set a value if there is more than one form control in the groupString0
String Đặt kích thước văn bản của nhãn. 'sm', 'md' (mặc định) hoặc 'lg'. Sử dụng chỗ dựa này để kích thước nhãn khớp với kích thước kiểm soát biểu mẫuString2
Boolean Number4Ẩn nội dung nhãn một cách trực quan nhưng cung cấp nội dung đó cho người dùng trình đọc màn hìnhString5
BooleanString7Controls the validation state of the feedback. `true` force shows valid-feedback, `false` force shows invalid feedback, `null` does not force show the feedbackString8
Boolean Number4Hiển thị văn bản phản hồi ở dạng
StringText to show when the form group has a valid state

  
    Title of the document
    
  
  
    
      

        Name
        
      
      

        Your Age
        
      
      

        Enter Your Country
        
      
      
    
  

03
BooleanNumber4When set, adds the Bootstrap validation trigger class 'was-validated' on the component

Khi bạn tạo biểu mẫu web, có thể bạn sẽ cần biết cách căn chỉnh nhãn với đầu vào. Tại đây, chúng tôi sẽ chỉ ra cách có thể tạo các phần tử được căn phải và căn trái bên cạnh đầu vào

Trong ví dụ của chúng tôi dưới đây, chúng tôi sử dụng ba

các yếu tố và vị trí và các yếu tố trong mỗi người trong số họ. Lưu ý rằng chúng tôi sử dụng một thuộc tính loại cho mỗi. Chúng tôi chỉ định lề-đáy của chúng tôi

yếu tố. Sau đó, chúng tôi đặt hiển thị của phần tử thành "khối nội tuyến" và cung cấp chiều rộng cố định. Sau đó, đặt thuộc tính text-align thành "right" và các nhãn sẽ được căn chỉnh với các đầu vào ở phía bên phải

Ví dụ về các nhãn căn phải bên cạnh đầu vào với thuộc tính text-align

  
    Title of the document
    
  
  
    
      

        Short
        
      
      

        Simple label
        
      
      

        Label having more text
        
      
    
  

Kết quả

Chúng tôi có thể xóa thuộc tính text-align và các nhãn sẽ được căn trái theo mặc định. Hãy xem một ví dụ, trong đó chúng tôi cũng thêm các thuộc tính giữ chỗ, id và tên trên đầu vào và thuộc tính for trên nhãn. Do đó, đầu vào sẽ được kích hoạt khi nhấp vào nhãn

  
    Title of the document
    
  
  
    
      

        Name
        
      





Your Age


Enter Your Country

Trong ví dụ tiếp theo của chúng tôi cũng vậy, chúng tôi sẽ căn trái các nhãn. Ở đây, chúng tôi cũng tạo khối nội tuyến và cung cấp chiều rộng cố định. Đối với phần tử, chúng tôi thêm phần đệm

Làm cách nào để căn chỉnh nhãn và đầu vào trong HTML Bootstrap?

Làm cách nào để đặt nhãn lên đầu Bootstrap đầu vào?

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?

Sự khác biệt giữa nhóm biểu mẫu và nhóm đầu vào trong Bootstrap là gì?