มีชุดคลาสในกรอบ Bootstrap ของ Twitter ที่จัดแนวข้อความหรือไม่

ตัวอย่างเช่นฉันมีบางตารางที่มี$ผลรวมที่ฉันต้องการจัดชิดขวา

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

และ

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

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

ไม่ Bootstrap ไม่มีคลาสสำหรับสิ่งนั้น แต่คลาสแบบนี้ถือว่าเป็นคลาส "ยูทิลิตี้" ซึ่งคล้ายกับคลาส ".pull-right" ที่ @anton พูดถึง

ถ้าคุณดูยูทิลิตี้ต่าง ๆ คุณจะเห็นคลาสยูทิลิตี้น้อยมากใน Bootstrap เหตุผลที่คลาสประเภทนี้ขมวดคิ้วโดยทั่วไปและแนะนำให้ใช้สำหรับ: ก) การสร้างต้นแบบและการพัฒนา - เพื่อให้คุณสามารถสร้างได้อย่างรวดเร็ว ออกหน้าของคุณจากนั้นลบคลาส pull-right และ pull-left เพื่อใช้ลอยในคลาสความหมายหรือองค์ประกอบเองหรือ b) เมื่อเห็นได้ชัดว่าใช้งานได้จริงมากกว่าโซลูชัน semantic เพิ่มเติม

ในกรณีของคุณโดยคำถามของคุณดูเหมือนว่าคุณต้องการให้มีการจัดเรียงข้อความบางอย่างทางด้านขวาในตารางของคุณ แต่ไม่ใช่ทั้งหมด ความหมายมันจะเป็นการดีกว่าถ้าจะทำสิ่งที่ชอบ (ฉันจะสร้างคลาสสองสามตัวที่นี่ยกเว้นคลาส bootstrap เริ่มต้น, .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เป็นคลาสคือถ้าคุณต้องการ refactor ตารางของคุณคุณจะต้องทำซ้ำมาร์กอัปและสไตล์ หากคุณใช้คลาสความหมายคุณอาจจะสามารถหลีกเลี่ยงการสร้างเนื้อหา CSS ซ้ำอีกครั้ง นอกจากนี้หากใช้เวลาในการปรับใช้คลาสกับองค์ประกอบเป็นวิธีที่ดีที่สุดในการพยายามกำหนดค่าความหมายให้กับคลาสนั้นเพื่อให้มาร์กอัพสามารถนำทางได้ง่ายขึ้นสำหรับโปรแกรมเมอร์คนอื่น ๆ (หรือคุณสามเดือนต่อมา)

วิธีคิดอย่างหนึ่งคือเมื่อคุณตั้งคำถามว่า "td นี้คืออะไร" คุณจะไม่ได้คำอธิบายที่ชัดเจนจากคำตอบ "จัดเรียงขวา"

เงินทุน 2.3 มีอาคารเรียนtext-left,text-rightและtext-center, แต่พวกเขาไม่ได้ทำงานในเซลล์ตาราง จนกว่า Bootstrap 3.0 จะวางจำหน่าย (ซึ่งพวกเขาได้แก้ไขปัญหาแล้ว) และฉันสามารถทำการสลับได้ฉันได้เพิ่มสิ่งนี้ลงในไซต์ CSS ของฉันที่โหลดหลังจากนั้นbootstrap.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, Bootstrap ไม่มีคลาสพิเศษสำหรับมัน

Bootstrap มี "pull-right" สำหรับ divs ที่ลอยอยู่ ฯลฯ ทางด้านขวา

Bootstrap 2.3 เพิ่งออกมาและเพิ่มรูปแบบการจัดตำแหน่งข้อความ:

Bootstrap 2.3 ถูกนำออกใช้ (2013-02-07)

Bootstrap 4 กำลังจะมา ! คลาสยูทิลิตี้ที่คุ้นเคยใน Bootstrap 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 มีเฉพาะในอัลฟ่า 2 คลาสเหล่านี้และวิธีที่ใช้อาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า

จัดตำแหน่งข้อความ Bootstrap ใน v3.3.5:

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

ตัวอย่าง CodePen

บรรทัดของรหัสต่อไปนี้ทำงานอย่างถูกต้อง คุณสามารถกำหนดคลาสเช่น text-center, left หรือ right, ข้อความจะจัดเรียงตามลำดับ

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

ที่นี่ไม่จำเป็นต้องสร้างคลาสภายนอกใด ๆ นี่คือคลาส Bootstrap และมีคุณสมบัติเป็นของตนเอง

คุณสามารถใช้ 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>

เมื่อเพิ่มคำตอบของเดวิดฉันแค่เพิ่มคลาสง่ายๆเพื่อเพิ่ม Bootstrap เช่นนี้:

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

เป็นเจ้าของด้วยการเปิดตัว Bootstrap 3 คุณสามารถใช้คลาสของtext-centerสำหรับการจัดตำแหน่งกึ่งกลางtext-left สำหรับการจัดแนวซ้ายtext-rightสำหรับการจัดตำแหน่งด้านขวาและtext-justifyสำหรับการจัดตำแหน่งชิดขอบ

Bootstrap เป็นเฟรมเวิร์กส่วนหน้าที่ใช้งานง่ายเมื่อคุณใช้มัน รวมถึงการปรับแต่งได้ง่ายเพื่อให้เหมาะกับความชอบของคุณ

เรามีห้าคลาสสำหรับสิ่งนั้นซึ่งคุณสามารถอ้างอิงได้จากที่นี่: 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>

นี่คือทางออกที่ง่ายที่สุด

คุณสามารถกำหนดคลาสเช่น text-center, left หรือ right ข้อความจะจัดแนวตามคลาสเหล่านี้ คุณไม่ต้องแยกชั้นเรียน คลาสเหล่านี้ inbuilt ใน 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 มีบางคลาส inbuilt เพื่อจัดตำแหน่งข้อความ

สำหรับการจัดกึ่งกลางส่วนหัวของตารางและข้อความข้อมูล:

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

สำหรับรายละเอียดเพิ่มเติม

หวังว่ามันจะช่วยคุณ

ใน Bootstrap คลาสนี้สามคลาสไม่ถูกต้อง

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

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

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

text-align:center !importantใช้ อาจมีtext-alignกฎ CSS อื่น ๆดังนั้นจึง!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>