ट्विटर के बूटस्ट्रैप का उपयोग करके एक सूची इनलाइन कैसे प्रदर्शित करें

Question

मैं बूटस्ट्रैप का उपयोग कर एक सूची इनलाइन प्रदर्शित करना चाहता हूं। क्या कोई ऐसा वर्ग है जिसे मैं इसे प्राप्त करने के लिए बूटस्ट्रैप से जोड़ सकता हूं?

Answer 1

बूटस्ट्रैप 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

बूटस्ट्रैप ३

<ul class="list-inline">
  <li>...</li>
</ul>

बूटस्ट्रैप ४

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

स्रोत: http://v4-alpha.getbootstrap.com/content/typography/#inline

अद्यतन लिंक https://getbootstrap.com/docs/4.4/content/typography/#inline

Comments

सभी उपलब्ध संस्करणों के समाधान प्रस्तुत करने के कारण सर्वश्रेष्ठ उत्तर! धन्यवाद दोस्त!

— mislavcimpersak

यह समय के साथ अधिक क्रिया क्यों करता है ? क्या बूटस्ट्रैप को यह एहसास नहीं है कि वे सादगी के विपरीत चल रहे हैं?

— पावेल कोमारोव

Answer 2

2.3.2 और 3 के बूटस्ट्रैप प्रलेखन के अनुसार, वर्ग को इस तरह परिभाषित किया जाना चाहिए:

बूटस्ट्रैप 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

बूटस्ट्रैप ३

<ul class="list-inline">
  <li>...</li>
</ul>

Answer 3

जबकि TheBrent का उत्तर सामान्य रूप से सही है, यह इस सवाल का जवाब नहीं देता है कि इसे आधिकारिक बूटस्ट्रैप तरीके से कैसे किया जाए। बूटस्ट्रैप के लिए मार्कअप सरल है:

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

स्रोत

http://jsfiddle.net/MgcDU/4602/

Comments

@ किसी कारण से यह काम नहीं कर रहा है। TheBrent solution ने काफी अच्छा काम किया :)

— सुशांत गुप्ता

हो सकता है कि आप बूटस्ट्रैप के प्राचीन संस्करण का उपयोग कर रहे हों। बूटस्ट्रैप डॉक्स स्पष्ट रूप से दिखाते हैं कि यह मार्कअप है।

— coneybeare

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

— TheBrent

@coneybeare समाधान केवल बूटस्ट्रैप 2 समाधान है, यही कारण है कि काम नहीं कर रहा है, अधिक कुछ नहीं, कुछ भी कम नहीं!

— cl0udw4lk3r

Answer 4

रेमंड के जवाब को पूरा करने के लिए

बूटस्ट्रैप 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

बूटस्ट्रैप ३

<ul class="list-inline">
  <li>...</li>
</ul>

बूटस्ट्रैप ४

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

स्रोत: http://v4-alpha.getbootstrap.com/content/typography/#inline

Comments

दिखता है, यह लंबा और लंबा हो जाता है।

— एंथनी त्सांग

बूटस्ट्रैप 7 <ul class = "अव्यवस्थित-सूची-इनलाइन-क्षैतिज-समतल-ऑनलाइन">

— एंथनी त्सांग

Answer 5

मैं bootstrap.css फ़ाइल के भीतर कुछ विशिष्ट नहीं ढूँढ सका। इसलिए, मैंने css को कस्टम css फ़ाइल में जोड़ा।

.inline li {
    display: inline;
}

Answer 6

मैं हैरान हुआ, सूची-इनलाइन बूटस्ट्रैप 4 में काम नहीं कर रहा था, आखिरकार मैंने इसे बूटस्ट्रैप 4 प्रलेखन में प्राप्त किया।

बूटस्ट्रैप 3 और 4

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

स्रोत: http://v4-alpha.getbootstrap.com/content/typography/#inline

Answer 7

यह समाधान बूटस्ट्रैप v2 का उपयोग करके काम करता है, हालाँकि TBS3 में INLINE वर्ग है। मुझे पता नहीं चला कि TBS3 में समतुल्य वर्ग (यदि एक है) क्या है।

इस सज्जन के पास v2 और v3 के बीच के अंतर का बहुत अच्छा लेख था।

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

EDIT - liअपनी समस्या को हल करने के लिए तत्वों को लक्षित करने के लिए CSS का उपयोग करें

    { display: inline-block; }

अपनी स्थिति में मैं LI के बजाय UL को लक्षित कर रहा था

    nav ul li { display: inline-block; }

Answer 8

इनलाइन वास्तव में इनलाइन नहीं है जिसकी हमें आवश्यकता हो सकती है - अर्थात प्रदर्शन: इनलाइन

जहाँ तक मैं प्रेक्षक के रूप में बूटस्ट्रैप इनलाइन एक क्षैतिज अभिविन्यास का अधिक है

अन्य तत्वों के साथ सूची को इनलाइन प्रदर्शित करने के लिए हमें आवश्यकता है

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

NB // स्टाइलशीट में जोड़ें

Answer 9

बूटस्ट्रैप प्रलेखन के अनुसार, आपको अपनी सूची में 'इनलाइन' श्रेणी जोड़ने की आवश्यकता है; इस तरह:

<ul class="inline">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

हालाँकि, यह काम नहीं करता है क्योंकि ऐसा प्रतीत होता है कि बूटस्ट्रैप सीएसएस फाइल में क्लास 'इनलाइन' का जिक्र है। इसके अतिरिक्त, इसे काम करने के लिए अपनी CSS फ़ाइल में निम्न पंक्तियाँ जोड़ें:

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}