Is er een set klassen in het Bootstrap-framework van Twitter die tekst uitlijnen?

Ik heb bijvoorbeeld enkele tabellen met $TOTALS die ik wil uitgelijnd op de rechter …

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

en

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

Antwoord 1, Autoriteit 100%

Bootstrap 3

V3 Tekst uitlijning DOCS

<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

V4 Tekst uitlijning DOCS

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

Antwoord 2, autoriteit 6%

Het gebruik van Bootstrap 3.x met text-rightwerkt perfect:

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

Antwoord 3, autoriteit 3%

Nee, Bootstrap heeft daar geen klasse voor, maar dit soort klasse wordt beschouwd als een “utility” -klasse, vergelijkbaar met de “.pull-right” -klasse die @anton noemde.

Als je naar utilities.less kijkt, zie je heel weinig utility-klassen in Bootstrap, de reden is dat dit soort klasse over het algemeen wordt afgekeurd en wordt aanbevolen om te gebruiken voor:
a) prototyping en ontwikkeling – zodat u snel uw pagina’s kunt uitbouwen en vervolgens de klassen pull-right en pull-left kunt verwijderen om floats toe te passen op meer semantische klassen of op de elementen zelf, of
b) wanneer het duidelijk praktischer is dan een meer semantische oplossing.

In jouw geval lijkt het er op basis van je vraag op dat je bepaalde tekst rechts in je tabel wilt laten uitlijnen, maar niet alles. Semantisch gezien zou het beter zijn om iets te doen als (ik ga hier maar een paar klassen verzinnen, behalve de standaard bootstrap-klasse, .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>

En pas gewoon de declaraties text-align: leftof text-align: righttoe op de klassen prijswaarde en prijslabel (of welke klassen dan ook voor u werken ).

Het probleem met het toepassen van align-rightals een klasse, is dat als je je tabellen wilt refactoren, je de opmaak en de stijlen opnieuw moet doen. Als u semantische klassen gebruikt, kunt u mogelijk wegkomen door alleen de CSS-inhoud te refactoren. En als je de tijd neemt om een klasse op een element toe te passen, kun je het beste proberen om semantische waarde aan die klasse toe te kennen, zodat de opmaak gemakkelijker te navigeren is voor andere programmeurs (of voor jou drie maanden later).

Een manier om erover na te denken is als volgt: wanneer u de vraag “Waar is dit td voor?” stelt, krijgt u geen verduidelijking van het antwoord “uitlijnen-rechts”.

Antwoord 4, autoriteit 3%

Bootstrap 2.3 heeft hulpprogrammaklassen text-left, text-righten text-center, maar ze werken niet in tabelcellen . Totdat Bootstrap 3.0 wordt uitgebracht (waar ze het probleem hebben opgelost) en ik de overstap kan maken, heb ik dit toegevoegd aan mijn site-CSS die wordt geladen na bootstrap.css:

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

Antwoord 5, autoriteit 2%

Voeg gewoon een “aangepast” stijlblad toe dat wordt geladen na het stijlblad van Bootstrap. Dus de klassedefinities zijn overbelast.

Verklaar in deze stylesheet de uitlijning als volgt:

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

Nu kunt u de “gemeenschappelijke” uitlijningsconventies voor TD en de elementen gebruiken.

Antwoord 6, Autoriteit 2%

Ik denk dat CSS al heeft text-align:right, AFAIK, Bootstrap heeft er geen speciale klasse voor.

Bootstrap heeft “pull-juist” voor zwevende divs, enz. Rechts.

Bootstrap 2.3 kwam net uit en voegde tekst uitlijnstijlen toe:

Bootstrap 2.3 Vrijgegeven (2013-02-07)

Antwoord 7

bootstrap 4 komt ! De hulpprogramma’s die bekend zijn gemaakt in Bootstrap 3.xzijn nu breekpunt ingeschakeld. De standaardbreekpunten zijn: xs, sm, md, lgEN xl, Dus deze tekstuitlijnklassen zien er zoiets uit als .text-[breakpoint]-[alignnment].

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

Belangrijk: Vanaf het schrijven is Bootstrap 4 alleen in alpha 2. Deze klassen en hoe ze worden gebruikt, kunnen zonder kennisgeving worden gewijzigd.

Antwoord 8

Loopstrap tekst uitlijning in V3.3.5:

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

codepen voorbeeld

Antwoord 9

De volgende regels code werken naar behoren. U kunt de klassen toewijzen zoals tekstcentrum, links of rechts, de tekst wordt dienovereenkomstig uitgelijnd.

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

Hier is het niet nodig om een externe klasse aan te maken. Dit zijn de Bootstrap-klassen en hebben hun eigen eigendom.

Antwoord 10

U kunt deze CSS hieronder gebruiken:

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

Antwoord 11

De klasse .text-alignis volledig geldig en bruikbaarder dan een .price-labelen .price-valuedie nutteloos meer.

Ik raad aan om 100% te gaan met een aangepaste hulpprogramma-klasse genaamd

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

Ik vind het leuk om wat magie te doen, maar dat is aan jou, zoals iets:

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

Antwoord 12

Hier is een kort en duidelijk antwoord met een voorbeeld.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

.money, .number {
    text-align: right !important;
}

   <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

<table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div>
<div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>

   <td class="text-end">$1,000.00</td>

/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
    text-align: right;
}

/* to right align text within whole column */
.custom-table tr>th:nth-child(3),
.custom-table tr>td:nth-child(3) {
  text-align: right;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <table class="table table-bordered custom-table">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Customer</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11 May 2021</td>
        <td>Paula Allen</td>
        <td>$104.98</td>
      </tr>
      <tr>
        <td>10 May 2021</td>
        <td class="text-end">Kevin(right-align)</td>
        <td>$233.00</td>
      </tr>
      <tr>
        <td>09 May 2021</td>
        <td>Joyes Murray</td>
        <td>$170.25</td>
      </tr>
    </tbody>
  </table>
</body>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

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

<table class="w-100">