Clase de alineación de texto para dentro de una tabla
¿Existe un conjunto de clases en el marco Bootstrap de Twitter que alinea el texto?
Por ejemplo, tengo algunas tablas con $totales que quiero alinear a la derecha...
<th class="align-right">Total</th>
y
<td class="align-right">$1,000,000.00</td>
Arranque 3
Documentos de alineación de texto v3
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Arranque 4
Documentos de alineación de texto v4
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Arranque 5
Documentos de alineación de texto v5
text-leftha sido reemplazado por text-start,
text-rightha sido reemplazado portext-end
<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Usar Bootstrap 3.x text-rightfunciona perfectamente:
<td class="text-right">
text aligned
</td>
No, Bootstrap no tiene una clase para eso, pero este tipo de clase se considera una clase de "utilidad", similar a la clase ".pull-right" que mencionó @anton.
Si observa utilidades.less verá muy pocas clases de utilidad en Bootstrap, la razón es que este tipo de clase generalmente está mal vista y se recomienda su uso para: a) creación de prototipos y desarrollo, para que pueda construir rápidamente elimine sus páginas, luego elimine las clases de extracción hacia la derecha y hacia la izquierda a favor de aplicar flotadores a clases más semánticas o a los elementos mismos, o b) cuando sea claramente más práctico que una solución más semántica.
En su caso, según su pregunta, parece que desea que cierto texto se alinee a la derecha en su tabla, pero no todo. Semánticamente, sería mejor hacer algo como (solo voy a crear algunas clases aquí, excepto la clase de arranque predeterminada, .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>
Y simplemente aplique las declaraciones text-align: lefto text-align: righta las clases precio-valor y precio-etiqueta (o cualquier clase que funcione para usted).
El problema de aplicar align-rightcomo clase es que si quieres refactorizar tus tablas tendrás que rehacer el marcado y los estilos. Si utiliza clases semánticas, es posible que pueda refactorizar solo el contenido CSS. Además, si se está tomando el tiempo para aplicar una clase a un elemento, es una buena práctica intentar asignar valor semántico a esa clase para que el marcado sea más fácil de navegar para otros programadores (o para usted tres meses después).
Una forma de verlo es la siguiente: cuando plantea la pregunta "¿Para qué sirve este td?", no obtendrá una aclaración de la respuesta "alinear a la derecha".
Bootstrap 2.3 tiene clases de utilidad text-left, text-righty text-center, pero no funcionan en las celdas de la tabla. Hasta que se lance Bootstrap 3.0 (donde solucionaron el problema) y pueda hacer el cambio, agregué este CSS al sitio que se carga después bootstrap.css:
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
Simplemente agregue una hoja de estilo "personalizada" que se carga después de la hoja de estilo de Bootstrap. Entonces las definiciones de clases están sobrecargadas.
En esta hoja de estilo, declare la alineación de la siguiente manera:
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
Ahora puede utilizar las convenciones de alineación "comunes" para los elementos td y th.
