Question Bootstrap - Classe Text-align pour la table interne


Existe-t-il un ensemble de classes dans Twitters Bootstrap Framework qui aligne le texte?

Par exemple. J'ai quelques tables avec $ totaux que je veux alignés à droite ...

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

et

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

626
2017-10-10 22:45


origine


Réponses:


Bootstrap 3

v3 Documents d'alignement de texte

<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 3 text align example

Bootstrap 4

v4 Documents d'alignement de texte

<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>

Bootstrap 4 text align example


1251
2018-02-28 16:03



Utiliser Bootstrap 3.x en utilisant text-right fonctionne parfaitement:

<td class="text-right">
  text aligned
</td>

66
2018-02-10 15:55



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.

Si vous regardez utilities.less vous verrez très peu de classes d'utilitaires dans Bootstrap, la raison en est que ce genre de classe est généralement mal vu, et il est recommandé de l'utiliser pour:  a) le prototypage et le développement - vous pouvez ainsi rapidement construire vos pages, puis supprimer les classes pull-right et pull-left en faveur de l'application de floats à 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.

Dans votre cas, il semblerait que vous vouliez que votre texte soit aligné sur la droite de votre tableau, mais pas tout. Sémantiquement, il vaudrait mieux faire quelque chose comme (je vais juste faire quelques classes ici, sauf pour la classe bootstrap 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 le text-align: left ou text-align: right les déclarations aux classes prix-prix et étiquettes-prix (ou les classes qui vous conviennent).

Le problème avec l'application align-right en tant que classe, c'est que si vous voulez refactoriser vos tables, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourriez être en mesure de ne refactoring que le CSS. De plus, si vous prenez le temps d'appliquer une classe à un élément, il est recommandé d'assigner une valeur sémantique à cette classe afin que le balisage soit plus facile à naviguer pour les autres programmeurs (ou vous trois mois plus tard).

Une façon d'y penser est la suivante: lorsque vous posez la question «À quoi cela sert-il?», Vous n'obtiendrez pas de précisions à partir de la réponse «align-right».


43
2018-04-05 17:58



Bootstrap 2.3 a des classes utilitaires text-left, text-right et text-center, mais elles ne fonctionnent pas dans les cellules de tableau. Jusqu'à ce que bootstrap 3.0 soit libéré (où ils ont corrigé le problème) et je suis capable de faire le changement, j'ai ajouté ceci à mon site CSS qui est chargé après bootstrap.css:

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

.text-center
{
    text-align: center !important;
}

.text-left
{
    text-align: left !important;
}

32
2018-06-04 11:20



Ajoutez simplement une feuille de style "personnalisée" qui est chargée après la feuille de style de Bootstrap. Les définitions de classe sont donc surchargées.

Dans cette feuille de style, déclarez l'alignement comme suit:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Vous pouvez maintenant utiliser les conventions d'alignement "communes" pour les éléments td et th.


25
2017-10-10 22:52



Je suppose que css a déjà text-align:right AFAIK bootstrap n'a pas de classe spéciale pour ça.

Bootstrap a "pull-right" pour les divs flottants etc vers la droite.

METTRE À JOUR bootstrap 2.3 vient de sortir et a ajouté des styles d'alignement de texte

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/


23
2018-03-18 14:42



Bootstrap 4 arrive! Les classes d'utilité familières à Bootstrap 3.x sont maintenant activés. Les points d'arrêt par défaut sont: xs, sm, md, lg et xl, donc ces classes d'alignement de texte ressemblent à quelque chose comme .text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

Important: En écrivant ceci, Bootstrap 4 est seulement en Alpha 2. Ces classes et comment elles sont utilisées sont sujettes à changement sans préavis.


15
2017-10-14 22:02



Bootstrap Text Alignment dans v3.3.5.

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

Exemple CodePen


12
2018-05-22 06:30



Ces lignes de code fonctionnent correctement. Vous pouvez assigner les classes comme le centre de texte, à gauche ou à droite, Le texte sera aligné en conséquence.

<p class="text-center"> Day 1 </p> 
<p class="text-left"> Day 2 </p> 
<p class="text-right"> Day 3 </p>

Ici pas besoin de créer une classe externe, ce sont les classes bootstrap et ont leur propre propriété.


10
2017-10-08 08:29



Vous pouvez utiliser cette css ci-dessous:

.text-right {text-align: right} /*For right align*/
.text-left {text-align: left} /*For left align*/
.text-center {text-align: center} /*For center align*/

10
2018-02-08 02:59



.text-align classe est totalement valide et plus utilisable que d'avoir un .price-label et .price-value qui ne servent plus à rien.

Je recommande d'aller à 100% avec une classe utilitaire personnalisée appelée

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

J'aime faire de la magie, mais ça dépend de toi, comme quelque chose:

span.pull-right {
  float:none;
  text-align:right;
}

7
2017-07-17 20:37