Bootstrap - فئة محاذاة النص للجدول الداخلي

استخدام Bootstrap 3.x باستخدام text-right يعمل بشكل مثالي:

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

لا ، ليس لدى Bootstrap فئة لذلك ، ولكن هذا النوع من الفصل يعتبر فئة "فائدة" ، على غرار فئة ".pull-right" التي ذكرهاanton.

إذا نظرت إلى الأدوات المساعدة. ما لم تشاهد عددًا كبيرًا من فئات الأدوات المساعدة في Bootstrap ، فالسبب هو أن هذا النوع من الفئة مستهجن بشكل عام ، ويوصى باستخدامه لأي من: أ) النماذج الأولية والتطوير - حتى تتمكن من البناء بسرعة خارج صفحاتك ، ثم قم بإزالة فئات السحب لليمين والسحب الأيسر لصالح تطبيق الطفو على فئات أكثر دلالات أو على العناصر نفسها ، أو ب) عندما يكون ذلك عمليًا بشكل واضح أكثر من حل أكثر دلالة.

في حالتك ، يبدو أنك ترغب في سؤالك بنسق معين على اليمين في الجدول الخاص بك ، ولكن ليس كل ذلك. بمعنى الكلمة ، سيكون من الأفضل القيام بشيء مثل (سأقوم فقط بتكوين بعض الفصول هنا ، باستثناء فئة bootstrap الافتراضية ، الجدول):

  <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 فقط. بالإضافة إلى ذلك ، إذا كنت تأخذ الوقت الكافي لتطبيق فصل دراسي على عنصر ما ، فمن الأفضل محاولة تعيين قيمة دلالية لذلك الفصل الدراسي بحيث يكون التنقل أسهل للمبرمجين الآخرين (أو بعد ثلاثة أشهر).

إحدى الطرق للتفكير في الأمر هي: عندما تطرح السؤال "ما معنى هذا؟" ، فلن تحصل على توضيح من الإجابة "محاذاة إلى اليمين".

يحتوي Bootstrap 2.3 على فصول فائدة يسار النص و يمين النص و مركز النص ، لكنها لا تعمل في خلايا الجدول. حتى يتم إصدار 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.

أعتقد أن المغلق لديه text-align:right AFAIK bootstrap لا يحتوي على فئة خاصة لذلك.

يحتوي Bootstrap على "سحب يميني" لقوائم div العائمة وما إلى ذلك.

UPDATEbootstrap 2.3 خرج للتو وأضاف أنماط محاذاة النص

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

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 موجود فقط في Alpha 2. هذه الفئات وكيفية استخدامها عرضة للتغيير دون إشعار.

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

سطر التعليمات البرمجية هذا يعمل بشكل صحيح. يمكنك تعيين فئات مثل مركز النص ، اليسار أو اليمين ، النص سوف محاذاة وفقا لذلك.

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

لا توجد حاجة لإنشاء أي فئة خارجية ، فهذه هي فئات bootstrap ولها ممتلكات خاصة بها.

يمكنك استخدام هذا المغلق أدناه:

.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;
}

من خلال إصدار bootstrap 3 ، يمكنك استخدام فئات text-center للمحاذاة المركزية ، text-left للمحاذاة اليسرى ، text-right للمحاذاة اليمنى و text-justify لمحاذاة مبررة.

يعد Bootstrap إطارًا بسيطًا للواجهة الأمامية للعمل معه بمجرد استخدامه. فضلا عن كونه eaay جدا لتخصيص لتناسب ذوقك.

هنا إجابة قصيرة وحلوة مع المثال.

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

لدينا خمس فئات لذلك ، يمكنك الرجوع إليها من هنا: 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 فئة غير صالحة

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

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

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