Cet article a été traduit de: Classe d'alignement de texte pour l'intérieur d'une table
Existe-t-il un ensemble de classes dans le framework Bootstrap de Twitter qui aligne le texte? Y a-t-il un ensemble de classes d' alignement du texte dans le framework Bootstrap de Twitter ?
Exemple Pour le, les tableaux avec I ont ont des $totaux qui je veux le lien entre ces à à droite ... par exemple, j'ai des sommes à $la table, je pense que l' alignement à droite ...
<th class="align-right">Total</th>
et et
<td class="align-right">$1,000,000.00</td>
# 1 étage
Référence: https://stackoom.com/question/rpZA/ Alignement du texte dans le tableau
# 2F
Je suppose que parce que CSS a déjà text-align:right, AFAIK, Bootstrap n'a pas de classe spéciale pour cela Je suppose que parce que CSS a déjà text-align:right, AFAIK, Bootstrap n'a pas de classes spéciales.
Bootstrap a "pull-right" pour les divs flottants, etc. à droite. Le côté droit de Bootstrap a une fonction "pull right" pour les divs flottants, etc.
Bootstrap 2.3 vient de sortir et a ajouté des styles d'alignement de texte: Bootstrap 2.3 vient de sortir et a ajouté des styles d'alignement de texte :
Bootstrap 2.3 est sorti (2013-02-07) Bootstrap 2.3 发布（2013-02-07）
# 3 étage
Non, Bootstrap n'a pas de classe pour cela, mais ce type de classe est considéré comme une classe "utilitaire", similaire à la classe ".pull-right" mentionnée par @anton. Non, Bootstrap ne fournit pas de classe pour cela, Mais cette classe est considérée comme une classe "utilitaire", similaire à la classe ".pull-right" mentionnée par @anton.
Si vous regardez utilities.less, vous verrez très peu de classes d'utilitaires dans Bootstrap, la raison étant que ce type de classe est généralement mal vu, et il est recommandé de l'utiliser pour: a) le prototypage et le développement afin que vous puissiez rapidement construire sortez vos pages, puis supprimez les classes pull-right et pull-left au profit de l'application de flottants à des classes plus sémantiques ou aux éléments eux-mêmes, ou b) quand c'est clairement plus pratique qu'une solution plus sémantique. Si vous regardez utilities.less , Ensuite, vous verrez quelques classes d'utilitaires dans Bootstrap, car cette classe n'est généralement pas acceptée, elle est recommandée pour l'un des éléments suivants: a) Prototypage et développement - afin que vous puissiez rapidement créer et sortir de la page, puis supprimer Les classes supérieure droite et supérieure gauche pour appliquer des nombres à virgule flottante à plus de classes sémantiques ou d'éléments eux-mêmes, ou b) quand c'est clairement plus pratique qu'une solution plus sémantique.
Dans votre cas, par votre question, il semble que vous souhaitiez aligner un certain texte à droite dans votre tableau, mais pas tout. En ce qui concerne votre situation, selon votre question, vous semblez vouloir une partie du tableau Le texte est aligné, mais pas tout. Sémantiquement, il serait préférable de faire quelque chose comme (je vais juste inventer quelques classes ici, à l'exception de la classe bootstrap par défaut, .table): Sémantiquement, il vaut mieux faire quelque chose de similaire (je vais Voici quelques classes, à l'exception de la classe de démarrage par défaut .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>
Et appliquez simplement les déclarations text-align: leftor text-align: rightaux classes de valeur et d'étiquette de prix (ou à toutes les classes qui fonctionnent pour vous). Appliquez text-align: leftou text-align: rightdéclarez simplement aux classes de valeur et d'étiquette de prix (ou à toute classe qui vous convient) .
L' application de problème avec à la toute la align-rightclasse, qui est si vous voulez votre Refactor par Aurez - vous refaire les tables au balisage et dans les styles. Le align-rightproblème est que en tant que classe, si vous voulez reconstruire la table, vous devez refaire les balises et le style. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous en sortir en ne refactorisant que le contenu CSS. Si vous utilisez des classes sémantiques, vous pourrez peut- être vous débarrasser de la situation difficile en refactorisant uniquement le contenu CSS. De plus, si vous prenez le temps d' appliquer une classe à un élément, il est préférable pratique d'essayer d'attribuer une valeur sémantique à cette classe afin que le balisage est plus facile de naviguer dans d'autres programmeurs (ou vous trois mois plus tard). En outre, si vous passez Lorsque vous appliquez une classe à un élément, la meilleure pratique consiste à essayer d'affecter des valeurs sémantiques à la classe afin que la balise soit facile à parcourir pour les autres programmeurs (ou trois mois plus tard).
Une façon d'y penser est la suivante: lorsque vous posez la question "A quoi sert ce td?", Vous n'obtiendrez pas de clarification de la réponse "align-right". Une façon de penser est: lorsque vous posez la question "this A quoi sert td? ", Vous n'obtiendrez pas de clarification de la réponse" align-right ".
# 4F
La .text-alignclasse est totalement valide et plus utilisable que d'avoir un .price-labelet .price-valuequi ne sont plus d'aucune utilité.La classe est totalement valide et plus utile .text-alignqu'avoir et utile..price-label.price-label.price-value
Je recommande d' aller à 100% avec une coutume classe utilitaire appelé Je recommande 100% du nom
.text-right {
text-align: right;
}
J'aime faire de la magie, mais cela dépend de vous, comme quelque chose: j'aime faire de la magie, mais cela dépend de vous, par exemple:
span.pull-right {
float: none;
text-align: right;
}
# 5F
Bootstrap 3 Bootstrap 3
Alignement du texte Docs fichier texte aligné 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>
Bootstrap 4 Bootstrap 4
Alignement du texte Docs V4 fichier d'alignement de texte 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>
# 6 étage
2.3 les classes utilitaires a sur Bootstrap text-left, text-rightet text-center, mais pas de travail dans le tableau Ils font les cellules. Sur Bootstrap 2.3 ayant des classes de services publics text-left, text-rightet text-center, mais ils ne fonctionnent pas dans la cellule du tableau. Jusqu'à ce que Bootstrap 3.0 soit publié (où ils ont résolu le problème) et que je puisse effectuer le changement, j'ai ajouté ceci à mon site CSS qui est chargé après bootstrap.css: Avant la sortie de Bootstrap 3.0 (ils ont résolu le problème), et Pouvant basculer, je l'ai ajouté au bootstrap.cssCSS du site que j'ai chargé plus tard:
.text-right
{
text-align: right !important;
}
.text-center
{
text-align: center !important;
}
.text-left
{
text-align: left !important;
}
