एक तालिका के अंदर पाठ-संरेखित वर्ग

Question

क्या ट्विटर के बूटस्ट्रैप ढांचे में कक्षाओं का एक सेट है जो पाठ को संरेखित करता है?

उदाहरण के लिए, मेरे पास $कुल योग वाली कुछ सारणियां हैं, जिन्हें मैं दाईं ओर संरेखित करना चाहता हूं ...

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

तथा

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

Answer 1

बूटस्ट्रैप ३

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>

बूटस्ट्रैप ४

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>

Comments

यह दुर्भाग्य से टेबल कोशिकाओं के लिए काम नहीं करता है। यह बस एक सीएसएस आदेश मुद्दा हो सकता है। इस मुद्दे को देखें [ github.com/twitter/bootstrap/issues/6837] । संस्करण 3.0 में तय किया जाना चाहिए।

— डेविड

Atm I इसको प्राप्त करने के लिए <td> <div class = 'text-center'> bootin </ div> </ td> करता है।

— माइकल जे। कैलकिंस

मैं चाहता हूँ कि बूटस्ट्रैप ने इस वर्ग के साथ ब्रेकपॉइंट्स का इस्तेमाल किया जैसे: टेक्स्ट-राइट-एमडी को टेक्स्ट को केवल ऊपर की तरफ दाईं ओर संरेखित करने के लिए।

— एरिक बिशर्ड

<p class = "text-left"> वाम गठबंधन पाठ। </ p> <p class = "text-center" केंद्र गठबंधन पाठ। </ p> <p class = "text-right"> सही गठबंधन पाठ। </ p> <p class = "text-justify"> न्यायोचित पाठ। </ p> <p class = "text-nowrap"> कोई रैप पाठ नहीं। </ p>

— user5026837

यह अजीब है कि मैंने टेक्स्ट-एमडी-राइट (और xs & lg) का उपयोग करने की कोशिश की, लेकिन वे काम नहीं करेंगे। मैं कोडपेन में था ताकि इसके साथ कुछ करना हो सके। वैसे भी, इस जवाब ने मेरे लिए काम किया। धन्यवाद!

— एडसन

Answer 2

बूटस्ट्रैप 3.x का उपयोग text-rightपूरी तरह से काम करता है:

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

Comments

आप इसे पूरी पंक्ति में भी लागू कर सकते हैं: <tr class = "text-right"> <td> text align </ td> </ tr>

— Glade Mellor

Answer 3

नहीं, बूटस्ट्रैप में उस के लिए एक वर्ग नहीं है, लेकिन इस तरह के वर्ग को ".pull-right" वर्ग के समान "यूटिलिटी" वर्ग माना जाता है, जिसका @anton ने उल्लेख किया है।

यदि आप यूटिलिटीज को देखते हैं। तब तक आपको बूटस्ट्रैप में बहुत कम उपयोगिता वर्ग दिखाई देंगे, इसका कारण यह है कि इस तरह की क्लास को आमतौर पर फेल किया जाता है, और इसका उपयोग या तो करने की सिफारिश की जाती है: ए) प्रोटोटाइप और विकास - ताकि आप जल्दी से निर्माण कर सकें। अपने पेजों को बाहर करें, फिर फ़्लोट-राइट और पुल-लेफ्ट क्लासेस को फ़्लोट लगाने के पक्ष में और अधिक सिमेंटिक क्लासेस या स्वयं तत्वों तक निकालें, या 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एक वर्ग के रूप में आवेदन करने के साथ समस्या यह है कि यदि आप अपनी तालिकाओं को फिर से भरना चाहते हैं तो आपको मार्कअप और शैलियों को फिर से करना होगा। यदि आप सिमेंटिक कक्षाओं का उपयोग करते हैं तो आप केवल सीएसएस सामग्री को पुनः प्राप्त करने में सक्षम हो सकते हैं। साथ ही, यदि किसी तत्व को एक कक्षा लागू करने में समय लग रहा है, तो उस कक्षा के लिए शब्दार्थ मान निर्दिष्ट करने का प्रयास करना सबसे अच्छा अभ्यास है, ताकि मार्कअप अन्य प्रोग्रामर (या आप तीन महीने बाद) के लिए नेविगेट करने में आसान हो।

इसके बारे में सोचने का एक तरीका यह है: जब आप "यह td for क्या है?" सवाल उठाते हैं, तो आपको उत्तर "एलाइन-राइट" से स्पष्टीकरण नहीं मिलेगा।

Comments

और वैसे भी, मुझे यकीन है कि आपने जो नाम चुना है उससे बेहतर होगा कि आप क्लास के नामों के साथ बेहतर कर सकें। लेकिन वह जोर नहीं था

— jonschlinkert

वे उस समय नहीं थे, और IMO अभी भी नहीं होना चाहिए।

— jonschlinkert

Answer 4

बूटस्ट्रैप 2.3 में उपयोगिता वर्ग हैं text-left, text-rightऔर text-center, लेकिन वे तालिका कोशिकाओं में काम नहीं करते हैं। जब तक बूटस्ट्रैप 3.0 जारी नहीं किया जाता है (जहां उन्होंने मुद्दा तय किया है) और मैं स्विच करने में सक्षम हूं, मैंने इसे अपनी साइट सीएसएस में जोड़ा है जो बाद में लोड किया गया है bootstrap.css:

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

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

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

Answer 5

बस एक "कस्टम" स्टाइलशीट जोड़ें जो बूटस्ट्रैप की स्टाइलशीट के बाद लोड की गई है। इसलिए कक्षा की परिभाषाएँ अतिभारित हैं।

इस स्टाइलशीट में संरेखण की घोषणा निम्नानुसार है:

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

अब आप td और th तत्वों के लिए "सामान्य" संरेखण सम्मेलनों का उपयोग करने में सक्षम हैं।

Answer 6

मुझे लगता है क्योंकि CSS में पहले से ही text-align:rightAFAIK है, बूटस्ट्रैप के पास इसके लिए एक विशेष वर्ग नहीं है।

बूटस्ट्रैप में फ्लोटिंग डिव आदि के लिए "पुल-राइट" होता है।

बूटस्ट्रैप 2.3 सिर्फ बाहर आया और पाठ संरेखण शैलियों को जोड़ा:

बूटस्ट्रैप 2.3 रिलीज़ (2013-02-07)

Comments

हाँ, मैं प्रत्येक तत्व पर इनलाइन शैलियों का उपयोग नहीं करना चाहता था। मैं पुल-राइट के बारे में जानता हूं लेकिन मैं नहीं चाहता कि तत्व तैर रहे हों। मैं सिर्फ एक वर्ग जोड़ सकता हूँ अगर कोई नहीं है :)

— Mediabeastnz

Answer 7

बूटस्ट्रैप 4 आ रहा है ! बूटस्ट्रैप में परिचित उपयोगिता वर्ग 3.xअब ब्रेक-पॉइंट सक्षम हैं। डिफ़ॉल्ट breakpoints हैं: 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>

महत्वपूर्ण: इसे लिखने के रूप में, बूटस्ट्रैप 4 केवल अल्फा 2 में है। ये कक्षाएं और उनका उपयोग कैसे किया जाता है, बिना सूचना के परिवर्तन के अधीन हैं।

Comments

बूटस्ट्रैप 4 इंस्टॉलेशन पर बूटस्ट्रैप 3 डॉक्स को पढ़ते समय इसने मुझे गार्ड ऑफ कर दिया। याद दिलाने के लिए शुक्रिया!

— बेन सिम्पसन

Answer 8

V3.3.5 में बूटस्ट्रैप पाठ संरेखण:

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

कोड उदाहरण

Answer 9

कोड की निम्नलिखित पंक्तियाँ ठीक से काम कर रही हैं। आप पाठ-केंद्र, बाएं या दाएं जैसी कक्षाएं असाइन कर सकते हैं, पाठ तदनुसार संरेखित करेगा।

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

यहां किसी भी बाहरी वर्ग को बनाने की कोई आवश्यकता नहीं है। ये बूटस्ट्रैप कक्षाएं हैं और उनकी अपनी संपत्ति है।

Answer 10

आप नीचे इस सीएसएस का उपयोग कर सकते हैं:

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

Answer 11

.text-alignवर्ग पूरी तरह से वैध है और एक की तुलना में अधिक उपयोगी है .price-labelऔर .price-valueकिसी भी अधिक काम का नहीं जो कर रहे हैं।

मैं नामक एक कस्टम उपयोगिता वर्ग के साथ 100% जाने की सलाह देता हूं

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

मुझे कुछ जादू करना पसंद है, लेकिन यह आपके ऊपर है, जैसे कुछ:

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

Comments

हाँ, हर वर्ग पूरी तरह से "वैध" है, लेकिन यह शब्दार्थ नहीं है। आपको उत्पादन कोड में उपयोगिता वर्गों का उपयोग करना चाहिए, वे "बूटस्ट्रैपिंग" के लिए हैं।

— jonschlinkert

क्योंकि w3 का कहना है कि उचित तरीके का उपयोग करने का मतलब यह नहीं है कि यह सबसे अच्छा है। jQuery यूआई और बूटस्ट्रैप मौजूद नहीं है अगर 'गैर-शब्दार्थ' वर्गों के कारण नहीं है। लोग तब तक के लिए अर्थ अर्थ का उपयोग करते हैं जब तक उन्हें एहसास नहीं हो जाता कि जेनेरिक के लिए जाना सभी पहलुओं में बेहतर है। यह पहली बार में पाने के लिए कठिन है या लगता है कि यह वास्तव में अच्छा है, मैं उस सड़क पर चला गया ...

— बार्ट Calixto

jQuery UI एक बुरा उदाहरण है, क्योंकि यह एक जावास्क्रिप्ट लाइब्रेरी है जिसमें सीएसएस और बूटस्ट्रैप भी शामिल है, जैसा कि मैंने बताया, उपयोगिता वर्गों को UTILITIES के रूप में उपयोग करता है। क्या तुमने कभी क्यों बूटस्ट्रैप कहा जाता है के बारे में सोचा है बूटस्ट्रैप ? ताकि आप विकास के लिए इन वर्गों का उपयोग कर सकें और उन्हें अपने उत्पादन कोड में बदल सकें। और मैंने यह नहीं कहा कि उनका उपयोग बिल्कुल नहीं करना चाहिए, मैं पुल-लेफ्ट, पुल-राइट का काफी उपयोग करता हूं। और मैं कभी-कभी टेक्स्ट-सेंटर का भी उपयोग करता हूं। लेकिन मैं उन्हें संयम से उपयोग करता हूं, और मैं कार्रवाई के पहले कोर्स के रूप में नहीं सलाह देता हूं कि अन्य लोग उन्हें बेहतर, अधिक अर्थ विकल्पों में उपयोग करते हैं।

— jonschlinkert

jQuery UI सिर्फ एक उदाहरण था। मैं जिस दृष्टिकोण के बारे में बात कर रहा हूं वह पुस्तकालयों का काम है। हम केन्डो, ब्लूप्रिंट, ग्रिड, 960, चिको यूआई और यहां तक ​​कि बूटस्ट्रैप को भी ऐसा करते देख सकते हैं। यह एकमात्र तरीका है जिससे यह पुस्तकालय मौजूद / कार्य कर सकते हैं। आप प्रमुख कंपनियों पर एक नज़र डाल सकते हैं कि वे कैसे Apple ( images.apple.com/v/imac/a/styles/imac.css ) जैसे सीएसएस का उपयोग कर रहे हैं और आप प्रभावित होंगे। यह उत्पादकता और एक बड़ी बात के लिए जिम्मेदार है। ईमानदार होना चाहिए, मुझे आश्चर्य हुआ कि मुझे यह समझाते हुए कोई ट्यूटोरियल नहीं मिला। मुझे लगता है कि यह शब्द बूटस्ट्रैप इट्स है क्योंकि यह कुछ ऐसा है जिसे आपको शुरू करना है, बाद में बदलना नहीं है।

— बार्ट कैलिक्सो

Answer 12

डेविड के जवाब पर विस्तार करते हुए , मैं सिर्फ बूटस्ट्रैप को बढ़ाने के लिए एक साधारण वर्ग को इस तरह जोड़ता हूं:

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

Answer 13

यहाँ एक उदाहरण के साथ एक छोटा और मीठा जवाब है।

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>

Comments

HTML टैग कर रहे हैं linkऔर scriptवैध बाहर headया bodyटैग? एक पूर्ण और मान्य HTML दस्तावेज़ उदाहरण क्यों नहीं प्रदान करें?

— पीटर मोर्टेंसन

Answer 14

ओउ, बूटस्ट्रैप 3 की रिलीज के साथ, आप text-centerकेंद्र संरेखण के लिए, text-left बाईं संरेखण के लिए, text-rightदाएं संरेखण के लिए और text-justifyएक उचित संरेखण के लिए कक्षाओं का उपयोग कर सकते हैं ।

एक बार उपयोग करने के बाद, बूटस्ट्रैप एक बहुत ही सरल फ्रंटएंड फ्रेमवर्क है। साथ ही अपनी पसंद के अनुसार फिट करने के लिए बहुत आसान है।

Answer 15

उसके लिए हमारे पास पाँच कक्षाएं हैं, जिन्हें आप यहाँ से संदर्भित कर सकते हैं: http://v4-alpha.getbootstrap.com/compenders/v/टिलियाँ/

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

Answer 16

यहाँ सबसे सरल उपाय है

आप टेक्स्ट-सेंटर, लेफ्ट या राइट जैसी क्लासेस असाइन कर सकते हैं। पाठ इन कक्षाओं के अनुसार संरेखित होगा। आपको अलग से कक्षाएं करने की आवश्यकता नहीं है। ये कक्षाएं बूटस्ट्रैप 3 में इनबिल्ट हैं

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

यहां देखें: डेमो

Answer 17

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

एमडी (मध्यम) या व्यापक आकार के व्यूपोर्ट पर बायां संरेखित पाठ।

एलजी (बड़े) या व्यापक आकार के व्यूपोर्ट पर लेफ्ट एलायड टेक्स्ट।

व्यूपोर्ट पर बायें संरेखित पाठ का आकार XL (अतिरिक्त-बड़ा) या व्यापक होता है।

Answer 18

बूटस्ट्रैप संस्करण में 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>

अधिक जानकारी के लिए

आशा है कि यह आपकी मदद करेगा।

Answer 19

इस तीन वर्ग बूटस्ट्रैप में अमान्य वर्ग

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

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

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

Comments

इस प्रश्न के कई उच्च गुणवत्ता के उत्तर पहले से ही हैं, जिनमें से अधिकांश तीन साल पहले पोस्ट किए गए थे जब सवाल पूछा गया था। हालांकि, यह आपकी प्रोग्रामिंग क्षमताओं को आगे बढ़ाने के लिए इस तरह के एक के रूप में सरल सवालों के जवाब देने का प्रयास करने के लिए एक सार्थक अभ्यास हो सकता है, इस उत्तर को अपनी वर्तमान स्थिति में पोस्ट करने से सवाल कुछ भी नहीं जोड़ता है। यदि आपके उत्तर के बारे में कुछ उपन्यास है, तो कृपया यह बताने के लिए कुछ वाक्य लें कि यह कैसे अलग है और क्यों यह बेहतर बनाता है।

— MTCoster 12

"इस तीन वर्ग बूटस्ट्रैप अमान्य वर्ग में" से आपका क्या अभिप्राय है ? क्या आप विस्तार से समझा सकते हैं? विशेष रूप से, "अमान्य वर्ग" के लिए ।

— पीटर मोर्टेंसन

Answer 20

का उपयोग करें text-align:center !important। अन्य text-alignसीएसएस नियम हो सकते हैं इसलिए !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>