Κλάση Text-align για το εσωτερικό ενός πίνακα

Υπάρχει ένα σύνολο κλάσεων στο πλαίσιο Bootstrap του Twitter που ευθυγραμμίζει το κείμενο;

Για παράδειγμα, έχω κάποιους πίνακες με σύνολα $ που θέλω να ευθυγραμμιστούν προς τα δεξιά...

<th class="align-right">Total</th>

και

<td class="align-right">$1,000,000.00</td>

Όχι, το Bootstrap δεν έχει μια κλάση γι' αυτό, αλλά αυτό το είδος κλάσης θεωρείται κλάση "χρησιμότητας", παρόμοια με την κλάση ".pull-right" που ανέφερε ο @anton.

Αν κοιτάξετε στο utilities.less θα δείτε πολύ λίγες κλάσεις utility στο Bootstrap, ο λόγος είναι ότι αυτό το είδος κλάσης είναι γενικά αποδοκιμασμένο και συνιστάται να χρησιμοποιείται είτε για: ώστε να μπορείτε να δημιουργήσετε γρήγορα τις σελίδες σας και στη συνέχεια να αφαιρέσετε τις κλάσεις pull-right και pull-left για να εφαρμόσετε floats σε πιο σημασιολογικές κλάσεις ή στα ίδια τα στοιχεία, ή β) όταν είναι σαφώς πιο πρακτικό από μια πιο σημασιολογική λύση.

Στην περίπτωσή σας, από την ερώτησή σας φαίνεται ότι επιθυμείτε την ευθυγράμμιση ορισμένων κειμένων στα δεξιά του πίνακα σας, αλλά όχι όλων. Σημασιολογικά, θα ήταν καλύτερα να κάνετε κάτι σαν (I'm just going to make up a few classes here, except for the default bootstrap class, .table):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

Και απλά εφαρμόστε τις δηλώσεις text-align: left ή text-align: right στις κλάσεις price-value και price-label (ή όποιες άλλες κλάσεις σας βολεύουν).

Το πρόβλημα με την εφαρμογή του align-right ως κλάση, είναι ότι αν θέλετε να αναδιαμορφώσετε τους πίνακές σας θα πρέπει να ξανακάνετε τη σήμανση και τα στυλ. Αν χρησιμοποιήσετε σημασιολογικές κλάσεις, ίσως μπορέσετε να ξεφύγετε με την αναδιαμόρφωση μόνο του περιεχομένου CSS. Επιπλέον, αν αφιερώνετε χρόνο για να εφαρμόσετε μια κλάση σε ένα στοιχείο, είναι η καλύτερη πρακτική να προσπαθήσετε να αποδώσετε σημασιολογική αξία σε αυτή την κλάση, ώστε η σήμανση να είναι πιο εύκολη στην πλοήγηση για άλλους προγραμματιστές (ή για εσάς τρεις μήνες αργότερα).

Ένας τρόπος για να το σκεφτείτε είναι ο εξής: όταν θέτετε την ερώτηση "Για τι είναι αυτό το td; ", δεν θα πάρετε διευκρινίσεις από την απάντηση "align-right".

Σχόλια (4)

Υποθέτω ότι επειδή η CSS έχει ήδη το text-align:right, AFAIK, το Bootstrap δεν έχει μια ειδική κλάση γι' αυτό.

Το Bootstrap έχει το "pull-right" για την αιώρηση divs, κλπ. προς τα δεξιά.

Το Bootstrap 2.3 μόλις κυκλοφόρησε και πρόσθεσε στυλ στοίχισης κειμένου:

Bootstrap 2.3 κυκλοφόρησε (2013-02-07)

Σχόλια (1)

Η κλάση .text-align είναι απολύτως έγκυρη και πιο εύχρηστη από το να έχετε μια .price-label και μια .price-value που δεν έχουν πλέον καμία χρησιμότητα.

Συνιστώ να χρησιμοποιήσετε 100% μια προσαρμοσμένη κλάση χρησιμότητας που ονομάζεται

.text-right {
  text-align: right;
}

Μου αρέσει να κάνω κάποια μαγεία, αλλά αυτό εξαρτάται από εσάς, όπως κάτι τέτοιο:

span.pull-right {
  float: none;
  text-align: right;
}
Σχόλια (4)