Είμαι βέβαιος ότι υπάρχει μια απλή λύση σε αυτό το πρόβλημα. Βασικά, αν έχω δύο στήλες πώς μπορώ να προσθέσω ένα διάστημα μεταξύ τους;
π.χ:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
Η έξοδος θα είναι απλά δύο στήλες ακριβώς η μία δίπλα στην άλλη που θα καταλαμβάνουν όλο το πλάτος της σελίδας. Ας πούμε ότι το πλάτος είχε οριστεί σε 1000px
τότε κάθε div θα είχε πλάτος 500px
.
Αν ήθελα ένα διάστημα 100px
μεταξύ των δύο πώς θα μπορούσα να το επιτύχω αυτό; Προφανώς αυτόματα μέσω του bootstrap τα μεγέθη των div θα γίνονταν 450px
το καθένα για να αντισταθμιστεί ο χώρος.
Μπορείτε να επιτύχετε απόσταση μεταξύ των στηλών χρησιμοποιώντας τις κλάσεις col-md-offset-*
, που περιγράφονται εδώ. Η απόσταση είναι συνεπής, ώστε όλες οι στήλες σας να ευθυγραμμίζονται σωστά. Για να πετύχετε ομοιόμορφη απόσταση και μέγεθος στήλης θα έκανα τα εξής:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
Ξέρω ότι άργησα να έρθω στο πάρτι, αλλά θα μπορούσατε να δοκιμάσετε να διαχωρίσετε τα πλαίσια με padding.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Δοκιμάστε το
Αυτό θα επιτρέψει ένα διάστημα μεταξύ των δύο στηλών και προφανώς αν θέλετε να αλλάξετε το προεπιλεγμένο πλάτος μπορείτε να χρησιμοποιήσετε mixins για να τροποποιήσετε το προεπιλεγμένο πλάτος του bootstrap. Ή, μπορείτε να δώσετε το πλάτος χρησιμοποιώντας το inline στυλ CSS.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>