Αυτή η ανάρτηση θα συζητήσει τι είναι οι χώροι υδρορροής και πώς μπορούν να αφαιρεθούν για ένα συγκεκριμένο div στο Bootstrap.
Τι είναι το Gutter Space στο Bootstrap;
Οι υδρορροές είναι οι χώροι ή τα κενά μεταξύ των στηλών που παράγονται από οριζόντια επένδυση. Χρησιμοποιούνται για την υποστήριξη ευθυγράμμισης περιεχομένου με απόκριση και διαστήματα στο σύστημα πλέγματος Bootstrap.
Η παρακάτω εικόνα δείχνει μια σειρά με κόκκινο περίγραμμα γύρω της. Μέσα στη γραμμή υπάρχουν τρία στοιχεία div ίσου μεγέθους με ίσες στήλες πλέγματος. Αν και οι στήλες είναι ίσες, υπάρχουν ακόμα κενά υδρορροών μεταξύ τους:
Πώς να αφαιρέσετε το Gutter Space για ένα συγκεκριμένο div στο Bootstrap;
Στο Bootstrap, η τάξη ' χωρίς υδρορροές ” χρησιμοποιείται για την εξάλειψη των χώρων υδρορροής οποιουδήποτε div.
Για το σκοπό αυτό:
- Πρόσθεσε ένα ' 'Ετικέτα μαζί με την τάξη' κύριος-διβ '.
- Στη συνέχεια, προσαρμόστε ένα τμήμα σειράς προσθέτοντας ένα άλλο '
'στοιχείο με την τάξη' σειρά '. Καθώς πρέπει να αφαιρέσουμε τα κενά από τη σειρά, καθορίστε μια κλάση ' χωρίς υδρορροές ' μεσα του.- Για να διαιρέσετε τη γραμμή πλέγματος σε τρεις ίσες στήλες, χρησιμοποιήστε την κλάση ' συν-4 '.
- Μέσα στο κοντέινερ '
' κάθε στήλης, προσαρμόστε τα στοιχεία '' με κλάσεις ' στήλη-1 », « στήλη-2 ', και ' στήλη-3 », αντίστοιχα: < div τάξη = 'main-div' >
< div τάξη = 'σειρά χωρίς υδρορροές' >
< div τάξη = 'col-4' >
< div τάξη = 'στήλη-1' >< / div >
< / div >
< div τάξη = 'col-4' >
< div τάξη = 'στήλη-2' >< / div >
< / div >
< div τάξη = 'col-4' >
< div τάξη = 'στήλη-3' >< / div >
< / div >
< / div >
< / div >CSS
Στην ενότητα CSS, οι κλάσεις που αναφέρονται στη σελίδα HTML έχουν στυλ με πολλές ιδιότητες στυλ.
Τάξη στυλ 'main-div'.
.main-div {
πλάτος : 600 px;
περιθώριο: 50 px auto;
}Ο ' .main-div Το ' αναφέρεται για πρόσβαση στο στοιχείο div που έχει κλάση ' κύριος-διβ '. Οι ακόλουθες ιδιότητες εφαρμόζονται σε αυτήν την κλάση:
- ' πλάτος ' ορίζει το πλάτος του στοιχείου.
- ' περιθώριο ” ορίζει την απόσταση γύρω από το στοιχείο.
Κατηγορία «σειράς» στυλ
.σειρά {
σύνορο : 1px συμπαγές κόκκινο;
}The Bootstrap» σειρά Η κλάση προστίθεται με το σύνορο ” ιδιοκτησία. Αυτό θα τυλίξει τη σειρά πλέγματος σε ένα καθορισμένο πλάτος, στυλ και περίγραμμα χρώματος.
Οι τρεις τάξεις» στήλη-1 », « στήλη-2 ', και ' στήλη-3 ' έχουν εκχωρηθεί το CSS ' χρώμα του φόντου ' και ' ύψος ” ιδιότητες για να τα κάνουν εξέχοντα.
Κλάση στυλ «στήλη-1».
.στήλη- ένας {
Ιστορικό- χρώμα : τιρκουάζ;
ύψος : 200 px;
}Κλάση στυλ «στήλη-2».
.στήλη- 2 {
Ιστορικό- χρώμα : βιολετί;
ύψος : 200 px;
}Κλάση στυλ «στήλη-3».
.στήλη- 3 {
Ιστορικό- χρώμα : κίτρινο πράσινο;
ύψος : 200 px;
}Μπορεί να παρατηρηθεί ότι το «
“κοντέινερ με την τάξη” σειρά ” έχει ρυθμιστεί με επιτυχία χωρίς χώρο υδρορροής μεταξύ τους:
Σας έχουμε διδάξει πώς να αφαιρέσετε τον χώρο υδρορροής για ένα συγκεκριμένο div στο Bootstrap.
συμπέρασμα
Για να αφαιρέσετε χώρους υδρορροής για ένα συγκεκριμένο div, η κλάση ' χωρίς υδρορροές ' μπορεί να χρησιμοποιηθεί. Για το σκοπό αυτό, προσθέστε το «
' στοιχείο μαζί με το ' σειρά χωρίς υδρορροές ” τάξη. Αυτή η ανάρτηση παρέχει έναν περιεκτικό οδηγό για τους χώρους υδρορροών και πώς μπορούν να εξαλειφθούν για ένα συγκεκριμένο div στο Bootstrap. - Στη συνέχεια, προσαρμόστε ένα τμήμα σειράς προσθέτοντας ένα άλλο '