Twitter의 부트 스트랩 프레임 워크에 텍스트를 정렬하는 클래스 세트가 있습니까?

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

<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"클래스와 유사한 "유틸리티"클래스로 간주됩니다.

utilities.less를 보면 Bootstrap에 유틸리티 클래스가 거의 없다는 것을 알 수 있습니다. 이러한 종류의 클래스는 일반적으로 찌그러지고 다음과 같은 용도로 사용되는 것이 좋습니다. 더 의미적인 클래스 나 요소 자체에 플로트를 적용하기 위해 오른쪽-오른쪽 및 왼쪽-왼쪽 클래스를 제거하거나 b) 의미 적 솔루션보다 명확하게 실용적 일 때

귀하의 경우, 귀하의 질문에 따라 테이블의 오른쪽에 특정 텍스트를 정렬하려는 것처럼 보이지만 전부는 아닙니다. 의미 적으로, 다음과 같은 작업을 수행하는 것이 좋습니다. (기본 부트 스트랩 클래스 인 .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>

그리고 가격표와 가격표 클래스 (또는 어떤 클래스가 당신에게 적합한 지)에 text-align: left또는 text-align: right선언을 적용하십시오 .

align-right클래스 로 적용 할 때 의 문제 는 테이블을 리팩터링하려면 마크 업과 스타일을 다시 실행해야한다는 것입니다. 시맨틱 클래스를 사용하는 경우 CSS 컨텐츠 만 리팩토링 할 수 있습니다. 또한 클래스를 요소에 적용하는 데 시간이 걸리는 경우 다른 프로그래머 (또는 3 개월 후)에서 마크 업을 쉽게 탐색 할 수 있도록 해당 클래스에 의미 값을 할당하는 것이 가장 좋습니다.

이것을 생각하는 한 가지 방법은 다음과 같습니다. "이것은 무엇입니까?"라는 질문을 던질 때, "정확한 정렬"이라는 대답으로부터 명확한 설명을 얻지 못할 것입니다.

부트 스트랩 2.3 유틸리티 클래스를 가지고 text-left, text-right하고 text-center있지만, 표 셀에서 작동하지 않습니다. Bootstrap 3.0이 릴리스 될 때까지 (문제가 해결 된 곳) 스위치를 만들 수있을 때까지 다음과 bootstrap.css같이 로드 된 사이트 CSS에 이것을 추가했습니다 .

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

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

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

Bootstrap의 스타일 시트 다음에로드되는 "사용자 정의"스타일 시트를 추가하십시오. 따라서 클래스 정의가 오버로드되었습니다.

이 스타일 시트에서 다음과 같이 정렬을 선언하십시오.

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

이제 td 및 th 요소에 "공통"정렬 규칙을 사용할 수 있습니다.

CSS에는 이미 text-align:rightAFAIK 가 있기 때문에 부트 스트랩에는 특별한 클래스가 없습니다.

부트 스트랩에는 부동 div 등을 오른쪽으로 "풀 오른쪽"이 있습니다.

부트 스트랩 2.3이 나오고 텍스트 정렬 스타일이 추가되었습니다.

부트 스트랩 2.3 릴리스 (2013-02-07)

부트 스트랩 4 가오 고있다 ! 부트 스트랩에 친숙한 유틸리티 클래스 3.x는 이제 중단 점을 사용합니다. 기본 중단 점은 다음과 같습니다 xs, sm, md, lg과 xl, 그래서 이러한 텍스트 정렬 클래스는 같은 모양 .text-[breakpoint]-[alignnment].

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

중요 : 이 글을 쓰는 시점에서 Bootstrap 4는 Alpha 2에만 있습니다. 이러한 클래스와 사용 방법은 예고없이 변경 될 수 있습니다.

v3.3.5의 부트 스트랩 텍스트 정렬 :

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

CodePen 예

다음 코드 줄이 올바르게 작동합니다. 텍스트 센터, 왼쪽 또는 오른쪽과 같은 클래스를 지정할 수 있습니다. 그에 따라 텍스트가 정렬됩니다.

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

여기에는 외부 클래스를 만들 필요가 없습니다. 이것들은 부트 스트랩 클래스이며 자체 속성이 있습니다.

아래에서이 CSS를 사용할 수 있습니다 :

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

.text-align클래스는 완전히 유효하고 있보다는 더 사용할 수 .price-label와 .price-value더 이상 아무 소용이있는.

라는 사용자 정의 유틸리티 클래스를 100 % 사용하는 것이 좋습니다.

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

나는 마술을 좋아하지만, 그것은 당신에게 달려 있습니다.

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

예를 들어 짧고 달콤한 답변이 있습니다.

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>

David의 답변을 확장하여 다음과 같이 간단한 클래스를 추가하여 부트 스트랩을 보강합니다.

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

Bootstrap 3이 출시되면 text-center가운데 정렬, text-left 왼쪽 정렬, text-right오른쪽 정렬 및 text-justify정당화 정렬 클래스를 사용할 수 있습니다 .

부트 스트랩은 일단 사용하면 매우 간단한 프론트 엔드 프레임 워크입니다. 뿐만 아니라 취향에 맞게 매우 쉽게 사용자 정의 할 수 있습니다.

여기에는 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>

Bootstrap 버전 4에서 텍스트를 배치 할 클래스가 내장되어 있습니다.

센터링 테이블 헤더 및 데이터 텍스트의 경우 :

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

자세한 사항은

그것이 당신을 돕기를 바랍니다.

이 세 클래스 부트 스트랩에서 유효하지 않은 클래스

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

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

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

사용하십시오 text-align:center !important. 다른 text-alignCSS 규칙 이있을 수 있으므로 !important중요합니다.

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>