it-swarm-ko.com

부트 스트랩 - 내부 테이블을위한 텍스트 정렬 클래스

텍스트를 정렬하는 Twitters Bootstrap Framework의 클래스 세트가 있습니까?

예 : 나는 $ 합계가있는 테이블을 가지고 있는데, 오른쪽으로 정렬하고 싶습니다 ...

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

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

부트 스트랩 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>

 Bootstrap 3 text align example

부트 스트랩 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 4 text align example

1322
Michael J. Calkins

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

<td class="text-right">
  text aligned
</td>
71
Paolo Casciello

아니요, 부트 스트랩에는 클래스가 없지만 이런 종류의 클래스는 언급 된 ".pull-right"클래스와 비슷한 "유틸리티"클래스로 간주됩니다.

당신이 유틸리티를 보지 않는다면, Bootstrap에서 매우 유용한 유틸리티 클래스를 보게 될 것입니다. 왜냐하면 이런 종류의 클래스는 일반적으로 싫은 결과를 낳기 때문에, 다음 중 하나에 사용하는 것이 좋습니다. a) 프로토 타입 작성 및 개발 - 신속하게 빌드 할 수 있습니다. 페이지를 출력 한 다음, 더 많은 의미 론적 클래스 나 요소 자체에 float를 적용하기 위해 pull-right 및 pull-left 클래스를 제거하거나, 시맨틱 솔루션보다 명확한 실용적인 경우 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 선언을 price-value 및 price-label 클래스 (또는 모든 클래스가 작동하는 클래스)에 적용하면됩니다.

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

그것을 생각할 수있는 한 가지 방법은 다음과 같습니다. "이게 무엇입니까?"라는 질문을 제기하면 "정렬 - 맞음"이라는 대답에서 설명을 얻지 못할 것입니다.

46
jonschlinkert

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

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

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

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

부트 스트랩의 스타일 시트 다음에로드되는 "사용자 정의"스타일 시트를 추가하기 만하면됩니다. 따라서 클래스 정의가 오버로드됩니다.

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

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

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

26
Michael

아마도 CSS에는 text-align:right AFAIK 부트 스트랩에 특별한 클래스가 없기 때문에 추측합니다.

부트 스트랩에는 부동 div 등을 오른쪽으로 당기는 "당겨 받기 권한"이 있습니다.

UPDATEbootstrap 2.3이 나왔다. 그리고 텍스트 정렬 스타일이 추가되었다.

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

23
Anton

부트 스트랩 4가 올 것입니다 ! Bootstrap 3.x에 익숙하게 만들어진 유틸리티 클래스는 이제 중단 점을 사용할 수 있습니다. 기본 중단 점은 xs, sm, md, lgxl이므로 이러한 텍스트 정렬 클래스는 .text-[breakpoint]-[alignnment]와 비슷합니다.

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

중요 : 이 글을 쓰는 시점에서, 부트 스트랩 4는 알파 2에만 있습니다.이 클래스들과 사용 방법은 사전 통보없이 변경 될 수 있습니다.

15
dKen

V3.3.5의 부트 스트랩 텍스트 정렬.

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

CodePen 예제

12
Gothburz

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

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

여기 외부 클래스를 만들 필요가 없으며 이들은 부트 스트랩 클래스이며 자체 속성을가집니다.

11
Vanshaj Rai

아래에서이 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*/
10
kushal kant

.text-align 클래스는 더 이상 쓸모없는 .price-label.price-value를 갖는 것보다 완전히 유효하고 더 유용합니다.

나는 커스텀 유틸리티 클래스로 100 %가는 것을 추천한다.

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

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

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

Ow와 함께 부트 스트랩 3을 릴리스하면 가운데 맞춤에는 text-center, 왼쪽 맞춤에는 text-left, 오른쪽 정렬에서는 text-right, 맞춤 정렬에서는 text-justify 클래스를 사용할 수 있습니다.

부트 스트랩은 일단 사용하면 매우 간단한 프론트 엔드 프레임 워크입니다. 뿐만 아니라 귀하의 취향에 맞게 사용자 정의하는 매우 eaay되고.

5
Jordan D. Angus

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

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

David의 답변을 확대하여 다음과 같이 부트 스트랩을 보강하는 간단한 클래스를 추가하기 만하면됩니다.

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

여기에 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>
3
Ganesh Putta

가장 간단한 해결책은 다음과 같습니다.

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

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

여기를 확인하십시오 : 데모

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

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

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

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

 .text-left {
    text-align: left; }
0
Ashu Designer