Chiều cao Bootstrap là gì?

Thuộc tính lớp học. h-chiều cao đầy đủ. 100%;. h-autoheight. Tự động. chiều cao h-0. 0px;. chiều cao h-1. 4px;. chiều cao h-2. 8px;. chiều cao h-3. 12px;. chiều cao h-4. 16px;. chiều cao h-5. 20px;. chiều cao h-6. 24px;. chiều cao h-7. 28px;. h-8height. 32px;. h-9height. 36px;. chiều cao h-10. 40px;. chiều cao h-12. 48px;. chiều cao h-16. 64px;. chiều cao h-20. 80px;. h-24height. 96px;. chiều cao h-32. 128px;. chiều cao h-40. 160px;. chiều cao h-48. 192px;. h-56height. 224px;. h-64height. 256px;. chiều cao h-80. 320px;. h-96height. 384px;. h-112height. 448px;. h-128height. 512px;. h-144height. 576px;. chiều cao h-150. 600px;. max-h-fullmax-height. 100%;. max-h-0max-height. 0px;. max-h-1max-height. 4px;. max-h-2max-height. 8px;. max-h-3max-height. 12px;. max-h-4max-height. 16px;. max-h-5max-height. 20px;. max-h-6max-height. 24px;. max-h-7max-height. 28px;. max-h-8max-height. 32px;. max-h-9max-height. 36px;. max-h-10max-height. 40px;. max-h-12max-height. 48px;. max-h-16max-height. 64px;. max-h-20max-height. 80px;. max-h-24max-height. 96px;. max-h-32max-height. 128px;. max-h-40max-height. 160px;. max-h-48max-height. 192px;. max-h-56max-height. 224px;. max-h-64max-height. 256px;. max-h-80max-height. 320px;. max-h-96max-height. 384px;. max-h-112max-height. 448px;. max-h-128max-height. 512px;. max-h-144max-height. 576px;. max-h-150max-height. 600px;

Cách sử dụng

Giống như các tiện ích đệm, nó sử dụng 4px làm kích thước gia tăng cho mỗi số. Vì vậy, h-10 là 10 * 4px là 40px. Để làm 100% chiều cao, bạn có thể sử dụng h-full. Các tiện ích chiều cao và chiều cao tối đa này thực sự hữu ích cho hình ảnh vì hình ảnh cần có chiều rộng và/hoặc chiều cao để chúng được hiển thị chính xác trong nhiều phiên bản Outlook

 /* image 48px width */
 /* image 600px width, use this for an image that is "full width" in a container in an email */

Kết hợp với các tiện ích chiều rộng, bạn có thể thực hiện những việc như tạo một vòng tròn có số trong đó

1

Phản ứng nhanh nhẹn

Theo mặc định, các lớp này nhắm mục tiêu tất cả các thiết bị. Tuy nhiên, nếu bạn chỉ muốn nhắm mục tiêu vào máy tính để bàn, bạn có thể thực hiện ____1_______0. Đối với tất cả các lớp này, bạn có thể áp dụng một

1

Nó được sử dụng để kích thước phần tử. Bằng cách sử dụng tiện ích định cỡ, bạn có thể dễ dàng tạo một phần tử rộng hoặc cao (so với phần tử gốc) bằng các tiện ích chiều rộng và chiều cao của chúng tôi. Bao gồm hỗ trợ cho 25%, 50%, 75% và 100% theo mặc định

Các tiện ích chiều rộng và chiều cao được tạo từ bản đồ $sizes Sass trong _variables. scss. Bạn có thể sửa đổi các giá trị này khi cần tạo các tiện ích khác tại đây

Định cỡ theo chiều rộng

Sau đây là cú pháp để định cỡ một phần tử theo chiều rộng

cú pháp

Kích thước theo chiều cao

Sau đây là cú pháp để định cỡ một phần tử theo chiều cao

cú pháp

Chiều rộng & Chiều cao tối đa

Bạn cũng có thể đặt chiều rộng và chiều cao ở mức tối đa

chiều rộng tối đa

cú pháp

Chiều cao tối đa

cú pháp

Có thể đặt chiều rộng và chiều cao cho một phần tử bằng cách sử dụng các giá trị 25%, 50%, 75%, 100% và tự động. Chẳng hạn, sử dụng w-25 (đối với các giá trị còn lại, thay thế 25 bằng các giá trị đó) cho tiện ích chiều rộng và h-25 (đối với các giá trị còn lại, thay thế 25 bằng các giá trị đó) cho tiện ích chiều cao

Ví dụ sau minh họa các tiện ích thiết lập chiều rộng và chiều cao cho một phần tử -

Thí dụ

   
      
      
      
      
      
      
      Bootstrap 4 Example
   
   
      

         
Width
         

            Width : auto
         
         

         
         

            Width : 100%
         
         

         
         

            Width : 75%
         
         

         
         

            Width : 50%
         
         

         
         

            Width : 25%
         
         

         
         
Height
         

            

               Height : 100%
            
            

               Height : 75%
            

            

               Height : 50%
            
            

               Height : 25%
            
            

               Height : auto
            
         

      

      
      
      
      
      
      
      
      
      
      
   

Nó sẽ tạo ra kết quả sau -

đầu ra

Tiện ích Max-Width và Max-Height

Bạn cũng có thể đặt chiều rộng và chiều cao tối đa cho một phần tử bằng cách sử dụng các tiện ích mw-100 và mh-100 như trong ví dụ bên dưới –

Làm cách nào để thay đổi chiều cao của div trong Bootstrap?

Kích thước Bootstrap là gì?

Làm cách nào để đặt chiều cao hàng Bootstrap?

Làm cách nào để thêm chiều cao bằng Bootstrap?