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.

  
    
    
  
  
    

      

        

          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

  
    
    
  
  
    

      

      

      

          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

1

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ử

  
    
    
  
  
    

      

      

      

          User
          
          
        
        
We'll never share your email with anyone else.
      
        
        
        
     
        

          Password
          
        
        
        
        Connection
      
    
  

  
    
    
  
  
    

      

      

      

          User
          
          
        
        
We'll never share your email with anyone else.
      
        
        
        
     
        

          Password
          
        
        
        
        Connection
      
    
  

• 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.

• 
  
    
      
      
    
    
      
  
        
  
        
  
        
  
            User
            
            
          
          
  We'll never share your email with anyone else.
        
          
          
          
       
          
  
            Password
            
          
          
          
          Connection
        
      
    
  

  4S trong khoảng thời gian

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

  2 mặc định là

  
  
    
      
      
    
    
      
  
        
  
        
  
        
  
            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

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

  7.
• 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

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

  8 trên

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

  2.

Vì Bootstrap áp dụng

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

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

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

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

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

Nhãn ví dụ

Nhãn khác

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

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

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

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

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

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.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Emaillabel>
    <input type="email" class="form-control" id="inputEmail4">
  div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Passwordlabel>
    <input type="password" class="form-control" id="inputPassword4">
  div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Addresslabel>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">Citylabel>
    <input type="text" class="form-control" id="inputCity">
  div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">Statelabel>
    <select id="inputState" class="form-select">
      <option selected>Choose...option>
      <option>...option>
    select>
  div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Ziplabel>
    <input type="text" class="form-control" id="inputZip">
  div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      label>
    div>
  div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign inbutton>
  div>
form>

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

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

Đô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

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Emaillabel>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    div>
  div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Passwordlabel>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    div>
  div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radioslegend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        label>
      div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        label>
      div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        label>
      div>
    div>
  fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        label>
      div>
    div>
  div>
  <button type="submit" class="btn btn-primary">Sign inbutton>
form>

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

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

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Emaillabel>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  div>
div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Emaillabel>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  div>
div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Emaillabel>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  div>
div>

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

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another labellabel>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
div>

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  div>
div>

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

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Namelabel>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Usernamelabel>
    <div class="input-group">
      <div class="input-group-text">@div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    div>
  div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preferencelabel>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...option>
      <option value="1">Oneoption>
      <option value="2">Twooption>
      <option value="3">Threeoption>
    select>
  div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      label>
    div>
  div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submitbutton>
  div>
form>

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.

  
    
    
  
  
    

      

      

      

          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

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  div>
div>

  
    
    
  
  
    

      

      

      

          User
          
          
        
        
We'll never share your email with anyone else.
      
        
        
        
     
        

          Password
          
        
        
        
        Connection