2
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Vì vậy, về cơ bản tôi có một vấn đề nhỏ với việc thiết lập chiều cao hàng/col bằng cách sử dụng % trong phản ứng bootstrap. Tôi có một hàng với 8 cột [tôi sẽ thêm một số nút, biểu tượng, hình ảnh và trường văn bản ở đây] mà tất cả chúng phải có cùng chiều cao.
Tôi đã cố gắng chỉ sử dụng % với chiều cao và MaxHeight nhưng rõ ràng nó không thành công. Tôi nghĩ PXS là vô nghĩa vì nó sẽ được hiển thị trên màn hình với độ phân giải khác nhau nên tôi sợ nó sẽ gây rối. Tôi đã tải xuống mdbreact và sử dụng 'className = "H-25 D-inline-block"' nhưng nó không hoạt động.
Machine 11
Machine 21
Machine 31
Machine 41
Machine 51
Machine 61
Machine 71
Machine 81
Tôi đã mong đợi chiều cao của cột được đặt như nhau ở mức 20/25% [sẽ có 3 hàng + Navbar được tạo ra] nhưng tôi thực sự không có gì ngoại trừ tôi làm điều đó với pixel nhưng nó thiếu điểm.
JEE MOK
5.6338 Huy hiệu vàng44 Huy hiệu bạc71 Huy hiệu đồng8 gold badges44 silver badges71 bronze badges
Khi được hỏi ngày 22 tháng 8 năm 2019 lúc 9:56Aug 22, 2019 at 9:56
2
Bạn có chiều cao của container được đặt thành 85%, vì vậy container cha mẹ của nó phải có chiều cao cụ thể. Nếu cha mẹ của container không có chiều cao cụ thể, thì bạn phải đặt chiều cao container.
Bạn cũng cần đặt chiều cao của mỗi hàng thành "H-25".
Đây là một ví dụ sử dụng HTML [hiệu ứng giống nhau trong React].
/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
row1-col-1
row1-col-2
row1-col-3
row2-col-1
row2-col-2
row2-col-3
row2-col-1
row2-col-2
row2-col-3
Đã trả lời ngày 10 tháng 4 năm 2020 lúc 1:12Apr 10, 2020 at 1:12
Terrymorseterrymorseterrymorse
6,4251 Huy hiệu vàng18 Huy hiệu bạc24 Huy hiệu đồng1 gold badge18 silver badges24 bronze badges
BSPREFIX
sợi dây
8
Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
Thay đổi thành phần cơ bản CSS Base Class và công cụ sửa đổi tên lớp Tiền tố. Đây là một cửa thoát hiểm để làm việc với CSS Bootstrap tùy chỉnh nặng.
Hệ thống lưới điện
Hệ thống lưới Bootstrap, sử dụng một loạt các thùng chứa, hàng và cột để bố trí và căn chỉnh nội dung. Nó được xây dựng với Flexbox và đáp ứng đầy đủ. Dưới đây là một ví dụ và một cái nhìn sâu sắc về cách lưới kết hợp với nhau.
Mới hoặc không quen thuộc với Flexbox? Đọc hướng dẫn CSS Tricks Flexbox này cho nền, thuật ngữ, hướng dẫn và đoạn mã.
Thùng đựng hàng
Các container cung cấp một phương tiện để trung tâm và theo chiều ngang nội dung trang web của bạn. Sử dụng Container
cho chiều rộng pixel đáp ứng.
Thùng chứa chất lỏng
Bạn có thể sử dụng
cho chiều rộng: 100% trên tất cả các kích thước chế độ xem và thiết bị.
Bạn có thể đặt các điểm dừng cho fluid
prop. Đặt nó thành điểm dừng [sm, md, lg, xl, xxl
] sẽ đặt Container
thành chất lỏng cho đến khi điểm dừng được chỉ định.
Các cột tự động
Khi không có chiều rộng cột nào được chỉ định, thành phần Col
sẽ hiển thị các cột chiều rộng bằng nhau
Đặt một chiều rộng cột
Tự động-Layout cho các cột lưới Flexbox cũng có nghĩa là bạn có thể đặt chiều rộng của một cột và có các cột anh chị em tự động thay đổi kích thước xung quanh nó. Bạn có thể sử dụng các lớp lưới được xác định trước [như hiển thị bên dưới], mixin lưới hoặc chiều rộng nội tuyến. Lưu ý rằng các cột khác sẽ thay đổi kích thước bất kể chiều rộng của cột trung tâm.
Nội dung chiều rộng biến
Đặt giá trị cột [cho bất kỳ kích thước điểm dừng] thành auto
thành các cột kích thước dựa trên chiều rộng tự nhiên của nội dung của chúng.
Lưới đáp ứngvisual order of your content.
Col
cho phép bạn chỉ định độ rộng cột trên 6 kích thước điểm dừng [XS, SM, MD, LG, XL và XXL]. Đối với mỗi điểm dừng, bạn có thể chỉ định lượng cột theo nhịp hoặc đặt chỗ dựa thành
/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
1 cho độ rộng bố cục tự động.Bạn cũng có thể trộn và kết hợp các điểm dừng để tạo các lưới khác nhau tùy thuộc vào kích thước màn hình.
Đạo cụ điểm dừng Col
cũng có mẫu prop /* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
3 phức tạp hơn: /* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
4 để chỉ định độ lệch và hiệu ứng đặt hàng.
/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
Bạn có thể sử dụng thuộc tính
/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
5 để kiểm soát thứ tự trực quan của nội dung của bạn.Tài sản
/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
5 cũng hỗ trợ /* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
7 [/* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
8] và /* styling just to show element dimensions */
.container {
border: 1px dashed green;
margin-top: 8px;
}
.col {
border: 1px solid #ccc;
background-color: #e0e0e0;
}
9 [
row1-col-1
row1-col-2
row1-col-3
row2-col-1
row2-col-2
row2-col-3
row2-col-1
row2-col-2
row2-col-3
0].Để bù đắp các cột lưới, bạn có thể đặt giá trị
row1-col-1
row1-col-2
row1-col-3
row2-col-1
row2-col-2
row2-col-3
row2-col-1
row2-col-2
row2-col-3
1 hoặc cho bố cục chung hơn, hãy sử dụng các tiện ích lớp ký quỹ.
Cài đặt chiều rộng cột theo hàngCopy import code for the Container component
row1-col-1
row1-col-2
row1-col-3
row2-col-1
row2-col-2
row2-col-3
row2-col-1
row2-col-2
row2-col-3
Tên | Loại hình | Mặc định | Sự mô tả |
như | loại nguyên tố | | 9 | Bạn có thể sử dụng một phần tử tùy chỉnh cho thành phần này |
XS | Số lượng cột để trải dài trên các thiết bị nhỏ [ | XXL | Số lượng cột để trải rộng trên các thiết bị thêm lớn [≥1400px]This is an escape hatch for working with heavily customized bootstrap css. |
Tên | Loại hình | Mặc định | Sự mô tả |
như | loại nguyên tố | 9
| |
Bạn có thể sử dụng một phần tử tùy chỉnh cho thành phần này | loại nguyên tố | 9
| |
Bạn có thể sử dụng một phần tử tùy chỉnh cho thành phần này | loại nguyên tố | 9
| |
XL | loại nguyên tố | Số lượng cột sẽ phù hợp với nhau trên các thiết bị lớn [≥1200px]. Sử dụng | |
XS | Số | 'Tự động' | {cols: số | 'Tự động' } | Số lượng cột sẽ phù hợp với nhau trên các thiết bị thêm nhỏ [ | |
XXL | Số | 'Tự động' | {cols: số | 'Tự động' } | Số lượng cột sẽ phù hợp với nhau trên các thiết bị thêm nhỏ [ | |
XXL | Số lượng cột sẽ phù hợp với nhau trên các thiết bị thêm lớn [≥1400px]. Sử dụng | BSPREFIX | sợi dâyThis is an escape hatch for working with heavily customized bootstrap css. |
6Copy import code for the Col component
Mặc định | Sự mô tả | như | |
loại nguyên tố | Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này. | LG | |
Boolean | "Tự động" | Số | {Span: Boolean | "Tự động" | Số, bù: số, thứ tự: "Đầu tiên" | "Cuối cùng" | con số } | Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này. | LG | |
Boolean | "Tự động" | Số | {Span: Boolean | "Tự động" | Số, bù: số, thứ tự: "Đầu tiên" | "Cuối cùng" | con số } | Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này. | LG | |
Boolean | "Tự động" | Số | {Span: Boolean | "Tự động" | Số, bù: số, thứ tự: "Đầu tiên" | "Cuối cùng" | con số } | Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này. | LG | |
XS | Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này. | LG | |
XXL | Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này. | LG | |
XXL | Số lượng cột sẽ phù hợp với nhau trên các thiết bị thêm lớn [≥1400px]. Sử dụng | BSPREFIX | sợi dâyThis is an escape hatch for working with heavily customized bootstrap css. |