Bootstrap-테이블 내부에 대한 텍스트 정렬 클래스

Bootstrap-테이블 내부에 대한 텍스트 정렬 클래스

---

Twitter의 Bootstrap 프레임 워크에 텍스트를 정렬하는 클래스 집합이 있습니까?

예를 들어, $오른쪽에 정렬하려는 합계 가있는 테이블 이 있습니다.

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

과

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

---

부트 스트랩 3

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>

부트 스트랩 4

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>

---

Bootstrap 3.x를 사용하면 text-right완벽하게 작동합니다.

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

---

아니요, 부트 스트랩에는 해당 클래스가 없지만 이러한 종류의 클래스는 @anton이 언급 한 ".pull-right"클래스와 유사한 "유틸리티"클래스로 간주됩니다.

If you look at utilities.less you will see very few utility classes in Bootstrap, the reason being that this kind of class is generally frowned upon, and is recommended to be used for either: a) prototyping and development - so you can quickly build out your pages, then remove the pull-right and pull-left classes in favor of applying floats to more semantic classes or to the elements themselves, or b) when it's clearly more practical than a more semantic solution.

In your case, by your question it looks like you wish to have certain text align on the right in your table, but not all of it. Semantically, it would be better to do something like (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>

And just apply the text-align: left or text-align: right declarations to the price-value and price-label classes (or whatever classes work for you).

The problem with applying align-right as a class, is that if you want to refactor your tables you will have to redo the markup and the styles. If you use semantic classes you might be able to get away with refactoring only the CSS content. Plus, if are taking the time to apply a class to an element, it's best practice to try to assign semantic value to that class so that the markup is easier to navigate for other programmers (or you three months later).

One way to think of it is this: when you pose the question "What is this td for?", you will not get clarification from the answer "align-right".

---

Bootstrap 2.3 has utility classes text-left, text-right, and text-center, but they do not work in table cells. Until Bootstrap 3.0 is released (where they have fixed the issue) and I am able to make the switch, I have added this to my site CSS that is loaded after bootstrap.css:

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

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

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

---

Just add a "custom" stylesheet which is loaded after Bootstrap´s stylesheet. So the class definitions are overloaded.

In this stylesheet declare the alignment as follows:

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

Now you are able to use the "common" alignment conventions for td and th elements.

---

I guess because CSS already has text-align:right, AFAIK, Bootstrap doesn't have a special class for it.

Bootstrap does have "pull-right" for floating divs, etc. to the right.

Bootstrap 2.3 just came out and added text alignment styles:

Bootstrap 2.3 released (2013-02-07)

---

Bootstrap 4 is coming! The utility classes made familiar in Bootstrap 3.x are now break-point enabled. The default breakpoints are: xs, sm, md, lg and xl, so these text alignment classes look something like .text-[breakpoint]-[alignnment].

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

Important: As of writing this, Bootstrap 4 is only in Alpha 2. These classes and how they're used are subject to change without notice.

---

Bootstrap text alignment in v3.3.5:

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

CodePen example

---

The following lines of code are working properly. You can assign the classes like text-center, left or right, The text will align accordingly.

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

Here there isn't any need to create any external class. These are the Bootstrap classes and have their own property.

---

You can use this CSS below:

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

---

The .text-align class is totally valid and more usable than having a .price-label and .price-value which are of no use any more.

I recommend going 100% with a custom utility class called

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

I like to do some magic, but that is up to you, like something:

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

---

Ow, with the release of Bootstrap 3, you can use the classes of text-center for center alignment, text-left for left alignment, text-right for right alignment and text-justify for a justified alignment.

Bootstrap is a very simple frontend framework to work with, once you utilize it. As well as being very easy to customize to fit your liking.

---

Expanding on David's answer, I just add a simple class to augment Bootstrap like this:

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

---

Here is a short and sweet answer with an example.

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>

---

여기에서 참조 할 수있는 5 개의 클래스가 있습니다. http://v4-alpha.getbootstrap.com/components/utilities/

<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.</div>
<div class="text-nowrap">No wrap text.</div>

---

다음은 가장 간단한 해결책입니다.

텍스트 센터, 왼쪽 또는 오른쪽과 같은 클래스를 할당 할 수 있습니다. 텍스트는 이러한 클래스에 따라 정렬됩니다. 따로 수업을하실 필요는 없습니다. 이 클래스는 BootStrap 3에 내장되어 있습니다.

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

여기에서 확인하십시오 : 데모

---

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

MD (중간) 크기 이상의 뷰포트에서 왼쪽 정렬 된 텍스트.

LG (대형) 이상의 뷰포트에서 왼쪽 정렬 된 텍스트.

XL (초대형) 크기 이상의 뷰포트에서 왼쪽 정렬 된 텍스트.

---

이 세 가지 클래스 부트 스트랩에서 잘못된 클래스

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

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

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

참고 URL : https://stackoverflow.com/questions/12829608/bootstrap-text-align-class-for-inside-a-table