วิธีแสดงรายการแบบอินไลน์โดยใช้ Bootstrap ของ Twitter

ฉันต้องการแสดงรายการแบบอินไลน์โดยใช้ Bootstrap มีคลาสที่ฉันสามารถเพิ่มจาก Bootstrap เพื่อให้บรรลุนี้

Bootstrap 2.3.2

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

Bootstrap 3

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

Bootstrap 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

ลิงก์ที่อัปเดตแล้วhttps://getbootstrap.com/docs/4.4/content/typography/#inline

ตามเอกสาร Bootstrap ที่ 2.3.2 และ 3 คลาสควรกำหนดดังนี้:

Bootstrap 2.3.2

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

Bootstrap 3

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

ในขณะที่คำตอบของ TheBrent นั้นเป็นความจริงโดยทั่วไป แต่ก็ไม่ได้ตอบคำถามว่าจะทำอย่างไรในวิธีบูตสแตรปอย่างเป็นทางการ มาร์กอัพสำหรับ bootstrap นั้นง่าย:

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

แหล่ง

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

เพื่อให้คำตอบของเรย์มอนด์สมบูรณ์

Bootstrap 2.3.2

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

Bootstrap 3

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

Bootstrap 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

ฉันไม่พบสิ่งใดที่เฉพาะเจาะจงภายในไฟล์ bootstrap.css ดังนั้นฉันจึงเพิ่ม css ลงในไฟล์ css ที่กำหนดเอง

.inline li {
    display: inline;
}

ฉันประหลาดใจ list-inline ไม่ทำงานใน bootstrap 4 ในที่สุดฉันก็ได้มาใน bootstrap 4 เอกสาร

Bootstrap 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

วิธีนี้ใช้งานได้กับ Bootstrap v2 อย่างไรก็ตามใน TBS3 class INLINE ฉันไม่ได้คิดออกว่าเป็นสิ่งที่เทียบเท่าระดับ (ถ้ามี) ใน TBS3

สุภาพบุรุษคนนี้มีบทความที่ดีเกี่ยวกับความแตกต่างระหว่าง v2 และ v3

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

แก้ไข - ใช้ CSS เพื่อกำหนดเป้าหมายliองค์ประกอบเพื่อแก้ไขปัญหาของคุณดังต่อไปนี้

    { display: inline-block; }

ในสถานการณ์ของฉันฉันได้กำหนดเป้าหมายไปที่ UL แทนที่จะเป็น LI

    nav ul li { display: inline-block; }

Inline ไม่ใช่อินไลน์ที่เราอาจต้องการ - เช่น display: inline

Bootstrap แบบอินไลน์เท่าที่ฉันสังเกตการณ์เป็นแนวนอนมากกว่า

เพื่อแสดงรายการแบบอินไลน์กับองค์ประกอบอื่น ๆ แล้วเราต้องการ

display: inline; added to the UL

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

NB // เพิ่มลงในสไตล์ชีท

ตามเอกสาร Bootstrap คุณจะต้องเพิ่มคลาส 'inline' ในรายการของคุณ แบบนี้:

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

อย่างไรก็ตามสิ่งนี้ใช้ไม่ได้เนื่องจากดูเหมือนว่ามี CSS บางส่วนขาดหายไปในไฟล์ Bootstrap CSS ที่อ้างอิงถึงคลาส 'inline' ดังนั้นให้เพิ่มบรรทัดต่อไปนี้ในไฟล์ CSS ของคุณเพื่อให้ทำงานได้:

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