Làm cách nào để đặt chiều cao đầy đủ trong Bootstrap?

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 –

Lorem ipsum dolor sit amet consectetur adipisizing elit. Veritatis, aspernatur. Harum id, quibusdam hàng hóa kiêm, rerum dolores accusamus dolorum, officis eaque quas qui quidem placeat magnam quod incint. Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?

D-flex là một lớp sẵn có trong Bootstrap 4, có thể được sử dụng để đặt chiều cao đầy đủ thành div. Chúng tôi sẽ minh họa nó bằng ví dụ mã làm việc bên dưới

cú pháp

..

Mã bên dưới tạo ba div theo cách sắp xếp theo chiều ngang nhưng vấn đề là chiều cao của div trong với lớp box-inner không giống nhau trong tất cả các div và phụ thuộc vào văn bản trong div. Chúng tôi muốn chiều cao giống nhau cho tất cả các div và bằng chiều cao của div với văn bản dài nhất

  • Chương trình




     

        

        

Chủ Đề